box-shadow ジェネレーターとは？CSSの影を見ながら作る
CSS の box-shadow は、要素のまわりに影をつけるプロパティです。横のずれ・縦のずれ・ぼかし・広がり・色の5つの値で1つの影を表し、カンマで区切ると複数の影を重ねられます。inset を付けると、影が内側に入ります。
このツールでは、影を1枚ずつ「レイヤー」として追加し、スライダーで値を動かしながら形を確認できます。やわらかい多重シャドウ、ニューモーフィズム、ネオンのような発光など24種の着せ替えから始めることもできます。できあがった HTML と CSS はボタン1つでコピーでき、プレビューを PNG・WebP の画像として保存することもできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 影を作る。着せ替え（24種）から近いものを選ぶか、「レイヤー追加」で影を足し、ずれ・ぼかし・広がり・色・透明度を調整します。レイヤーはつまみをドラッグして並べ替えられます。
- HTML と CSS をコピーする。「HTML Code」と「CSS Code」の Copy ボタンを押し、自分のページに貼り付けます。HTML は
<div class="box">の形で出力されます。 - 自分の要素のクラスに合わせる。既存のボタンやカードに使うときは、CSS の
box-shadowの行だけを、その要素のクラスに書き写します。
複数の影は、先に書いたものほど手前に重なります。レイヤーの並びを変えると、出力される CSS の順番も変わります。
ブラウザ対応
| ブラウザ | box-shadow に対応したバージョン |
|---|---|
| Chrome・Edge | Chrome 10 以降・Edge 12 以降 |
| Safari（Mac・iPhone） | Mac 5.1 以降・iPhone 5 以降 |
| Firefox | 4 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。inset も含め、いま使われている主なブラウザはすべて接頭辞なしで対応しています。-webkit-box-shadow を書き足す必要はありません。
よくある質問 (FAQ)
順に「横のずれ・縦のずれ・ぼかし・広がり・色」です。たとえば
box-shadow: 0 10px 20px -5px rgba(0,0,0,.2); は、真下に 10px ずらし、20px ぼかし、影を 5px 小さくした薄い黒の影になります。
先頭に inset を付けると内側の影になります。
近くのくっきりした影と、遠くのぼやけた影を同時に表せるからです。影が1枚だけだと、ぼかしを強くするとぼやけすぎ、弱くするとくっきりしすぎます。
ずれとぼかしの小さい影から大きい影までを数枚重ねると、実物に近いやわらかな影になります。着せ替えの多重シャドウはこの考え方で作っています。
背景と同じ色の要素に、明るい影と暗い影を反対向きにつけます。右下に暗い影、左上に白い影を置くと浮き出して見え、両方に
inset を付けるとへこんで見えます。
背景と要素の色をそろえないと効果が出ないので、このツールでは「背景」と「要素の色」を同じ色にして試してください。
box-shadow は要素の四角い枠（角丸を含む）に沿って影をつけ、drop-shadow() は透明な部分を除いた形に沿って影をつけます。
カードやボタンには box-shadow、透過 PNG のアイコンや切り抜き画像には drop-shadow() が向いています。drop-shadow() には広がりの値と
inset がありません。