JA

CSS box-shadowジェネレーター

プリセットを選ぶか、スライダーでオフセット・ぼかし・広がり・色・不透明度を調整してください。影は複数重ねられ、どれでも内側の影（inset）に切り替えられます。プレビューはすぐに更新され、完成したCSSはワンクリックでコピーできます。手持ちのCSSを下に貼り付けて編集を続けることもできます。

影を調整

プリセット

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
影は1行に1つ、カンマ区切り。例：0 4px 12px rgba(0, 0, 0, 0.12)
入力内容はこのブラウザーにのみ保存されます。

結果

CSS宣言
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
影のレイヤー（1つ目が最前面）
No.オフセットX（px）オフセットY（px）ぼかし（px）広がり（px）色種類
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)外側
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)外側
影がボックスからはみ出す幅（目安）
上 10 px · 右 20 px · 下 30 px · 左 20 px

計算方法

box-shadowの仕組み

W3Cの仕様（CSS Backgrounds and Borders Level 3）では、影は2〜4個の長さ、省略可能な色、省略可能なキーワードinsetで構成されます。

CSSのbox-shadowを作る手順

  1. プリセットを選ぶか、スライダーでオフセット・ぼかし・広がり・色・不透明度を設定します。
  2. 必要に応じて影を追加し、内側の影（inset）にしたいものに印を付けます。
  3. CSS宣言をコピーします。手持ちのbox-shadowのコードを貼り付けて編集を続けることもできます。
値意味
1つ目の長さ右方向への水平オフセット（マイナスで左）
2つ目の長さ下方向への垂直オフセット（マイナスで上）
3つ目の長さぼかしの半径。マイナス不可、省略時は0
4つ目の長さ広がり（spread）。影を大きくし、マイナスなら小さくする
色省略すると文字色（currentColor）を使用
inset影をボックスの外側ではなく内側に描く

複数の影はカンマで区切ります。1つ目の影が最前面に描かれ、残りはその後ろに重なります。影はレイアウトに影響せず、スクロールバーも生じませんが、親要素にoverflow: hiddenがあると切り取られます。

ぼかしはどこまで広がる？

仕様では、ぼかしはぼかし半径の半分を標準偏差とするガウスぼかしに近似することが求められています。できあがるグラデーションの幅はぼかしの値の約2倍で、影の縁を中心にかかるため、外側へはおよそぼかし半径1つ分広がります。

例 0 10px 25px -5px：縁はボックスの25−5＝20px外側にあり、10px下にずれています。そのため影は上に約20−10＝10px、左右に20px、下に20＋10＝30pxはみ出します。ジェネレーターは「影がはみ出す幅」にこの値を表示するので、影が切れないようにする余白（padding）の目安になります。

よくある使い方

よくある質問

ぼかし（blur）と広がり（spread）の違いは？

ぼかし（3つ目の値）は、影の元の面積を変えずに縁をやわらかくします。広がり（4つ目の値）は、ぼかす前の影の面積そのものを大きく・小さくします。ぼかし0で広がりをプラスにすると、くっきりした輪郭線になります。

影を複数重ねるには？

カンマで区切ります。例：0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)。1つ目の影が最前面に描かれます。ジェネレーターでは「＋ 影を追加」でレイヤーを増やせます。

影が切れてしまうのはなぜですか？

影は要素のサイズに含まれません。親要素にoverflow: hiddenやoverflow: autoがあると、はみ出した部分が切り取られます。ジェネレーターが表示する「はみ出す幅」の分だけ、親要素に余白（padding）を取ってください。

box-shadowはすべてのブラウザで使えますか？

はい。複数の影、inset、rgba()の色を含め、box-shadowは現在のすべての主要ブラウザでベンダープレフィックスなしに使えます。ジェネレーターは透明な色をrgba()で書き出すので、古いブラウザでも解釈できます。

下側だけに影を付けるには？

ぼかしを打ち消すマイナスの広がりを指定します。例：box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3)。こうすると影はボックスの上と左右にははみ出さず、下に8pxだけ出ます。

出典・根拠

更新日：

関連ツール