シャドウジェネレーター

デザイナーやフロントエンド開発者が画面デザインを実装へ渡す前には、シャドウジェネレーターが役立ちます。CSSのbox-shadowプロパティを組み立てます。

CSSのbox-shadowプロパティを組み立てます。アカウントを作成せずブラウザーで無料で利用でき、表示された結果を十分に確認してから次の作業へ進めます。

サンプル入力は、ぼかしと暗い色を伴うずらした影を表しています。生成後、結果には対応する box-shadow プロパティが表示されます。一度に 1 つの値を変更して、各設定が影に与える影響を確認できます。

入力

出力

box-shadow: 2px 2px 8px 1px #000000;

すべてはブラウザー内で行われます。入力した設定はデバイス上に保持され、アップロードされたり保存されたりすることはありません。CSS プロパティはローカルで組み立てられ、外部接続はありません。

オフセットとぼかしの値は通常、ピクセルを表すため単位なしで指定します。px や rem などの単位を追加することもできます。すべての値で同じ考え方を使用してください。

このフィールドは 16 進数の色を想定しています。透明な影にするには、形式が許せばアルファチャンネル付きの色を使用できますが、最も簡単な方法は単色を選び、CSS で不透明度を調整することです。

プロパティが表示可能なサイズの要素に適用されていることを確認してください。ぼかしや広がりの値が小さすぎると、影が見えなくなることがあります。色が背景と同じでないことも確認してください。