CSS box-shadow ジェネレーター
XD・FigmaのシャドウをCSSに簡単変換
X・Y・ぼかし・広がり・色・透明度を入力するだけで、
CSSのbox-shadowをリアルタイムで生成できます。
XDやFigmaのシャドウ設定をCSSに変換したいときにも便利な無料ツールです。
Shadow Settings
Preview
CSS box-shadow ジェネレーターの使い方
このツールでは、影の位置やぼかし、色などを入力するだけで
CSSのbox-shadowを自動生成できます。
入力した内容はプレビューにリアルタイムで反映されるため、
実際の見た目を確認しながら影を調整できます。
- Xに影の横方向の位置を入力します。
- Yに影の縦方向の位置を入力します。
- Blurで影のぼかし具合を設定します。
- Spreadで影の広がりを調整します。
- Color・Opacityで影の色と透明度を設定します。
- 生成されたCSSを「CSSをコピー」ボタンでコピーします。
XD・FigmaのシャドウをCSSに変換する方法
Adobe XDやFigmaでデザインカンプに設定されているシャドウの数値を、
このジェネレーターの対応する項目に入力してください。
入力した値から、コーディングでそのまま使用できる
box-shadowを生成します。
デザインカンプを確認しながらCSSの値を毎回計算する必要がないため、 XD・FigmaからHTML/CSSへコーディングするときの時短にも利用できます。
入力例
X：0px
Y：4px
Blur：12px
Spread：0px
Color：#000000
Opacity：20%
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);CSSのbox-shadowとは？
box-shadowは、
HTML要素の周囲に影を付けるためのCSSプロパティです。
カードやボタン、画像、モーダルなどに影を加えることで、
要素を背景から浮き上がって見せることができます。
基本的な書き方
box-shadow: X方向 Y方向 ぼかし 広がり 色;box-shadowの各値について
box-shadowでは複数の値を組み合わせて、 影の位置や柔らかさ、大きさを調整します。
| 項目 | 役割 |
|---|---|
| X | 影の横方向の位置です。 正の値で右、負の値で左へ移動します。 |
| Y | 影の縦方向の位置です。 正の値で下、負の値で上へ移動します。 |
| Blur | 影のぼかし具合を指定します。 値を大きくすると、より柔らかい影になります。 |
| Spread | 影の広がりを指定します。 正の値で大きく、負の値で小さくできます。 |
| Color | 影に使用する色を指定します。 |
| Opacity | 影の透明度を指定します。 値を小さくするほど薄い影になります。 |
自然なbox-shadowを作るコツ
Webサイトのカードやボタンに自然な影を付けたい場合は、 黒をそのまま濃く表示するよりも、 ぼかしを大きめにして透明度を低くすると柔らかい印象になります。
まず試しやすい設定
Yを4〜8px程度、Blurを12〜24px程度、 Opacityを10〜20%程度から調整すると、 自然な影を作りやすくなります。