CSSボックスシャドウジェネレーター

光をドラッグして影を置き、重ねて整えるbox-shadowエディター

CSSボックスシャドウジェネレーターは、box-shadowの値を目で確かめながら調整するツールです。ステージ上の光をドラッグすると、すべてのレイヤーの影が光と反対側へまとめて回ります。影のハンドルをドラッグすると、選んだレイヤーの位置だけが動きます。レイヤーは12層まで重ねられ、リストの1番が一番上に描かれます。ガイド線には、選んだレイヤーの影の輪郭とぼかしが広がる帯が表示されます。黄色の点線は、すべての影がボックスの外へ届く距離を、四辺の数字とともに示します。

最初の画面は、影を4層に分け、オフセットとぼかしを2倍ずつ増やしたやわらかい影です。サンプル24種から出発点を選び、背景・形・サイズを実際に使う画面に合わせて変え、結果をCSSとしてコピーするだけで使えます。透明なPNGやSVGのアイコンのように、形に沿った影が必要なときは、描画方式をdrop-shadowに切り替えます。同じ見た目になるようぼかしの値を置き換えたfilterのコードを受け取れます。

どんなときに使うか

影は、画面の中で何が浮いていて何が押し込まれているかを伝える仕掛けです。同じ値でも背景や形によってまったく違って見えるので、コードを書く前に実際の使い方に近い状態で確かめるほうが早く済みます。

• カード・モーダル・ドロップダウンを浮かせたいとき: 濃い影を1層だけ置くより、薄い影を何層か重ねたほうが濁って見えません。やわらか4層や広い6層のサンプルから始め、「すべてのレイヤー」の「小さく・大きく」で高さを合わせます。
• 入力欄や押したボタンのようにへこんで見せたいとき: 内側の影(inset)を使います。入力欄のサンプルは、上側の内側の影と1pxの内側の線を組み合わせています。
• フォーカスリングや選択表示を作るとき: ぼかしなしで広がりだけを持たせた影は、レイアウトを押しのけない枠線のように見えます。ただしWindowsのハイコントラストなどの強制カラーモードではbox-shadowが無効になるため、フォーカス表示にはoutlineも併用します。
• 透明なアイコンやロゴに影をつけるとき: box-shadowはボックス形の影を作ります。形に沿わせたいときはdrop-shadowを選びます。
• 暗い背景や色つきの背景で確かめるとき: 明るい画面に合わせた黒い影は、暗い背景ではほとんど消えてしまいます。背景を切り替えながら、影が実際に見えるかを確認します。

使い方

1. 出発点を選びます。下のサンプル24種のどれかを押すと、レイヤー・背景・形がまとめて切り替わります。グループ(基本、重ね影、内側、色・光、スタイル)で絞り込めます。
2. 光をドラッグします。ステージの太陽形のハンドルを円の上でドラッグすると、すべてのレイヤーのオフセットが同じ角度だけ回ります。キーボードでは、矢印キーで1°ずつ、Shiftを押しながらで15°ずつ回ります。
3. レイヤーを整えます。リストでレイヤーを選び、バーや入力欄で横・縦・ぼかし・広がり・色・不透明度を変えます。ステージの十字のハンドルをドラッグすると、選んだレイヤーの横と縦がいっしょに変わります。1層だけの影は「4層に分割」でやわらかい重ね影に変えられます。
4. 使う画面に合わせます。形(カード・ボタン・円・入力欄・四角形・透明アイコン)とサイズ、背景と要素の色を、実際の画面に近づけます。黄色の点線の数字で、影がボックスの外へどれだけ広がるかを確かめます。
5. コピーします。「CSSをコピー」でコードを持ち出し、「リンクをコピー」で今の状態をURLとして保存します。URLにはレイヤー・背景・要素の色・形・サイズ・描き方が入り、画面を最初に開いたときはURLを書き換えません。

5つの値の役割

1層の影は[inset] 横 縦 ぼかし 広がり 色の順に書きます。長さは2個から4個まで指定でき、省略した長さは0として扱われます。そのためこのツールは、ぼかしと広がりが0のときはその値を省き、6px 6px #0F172Aのように書き出します。

• 横・縦のオフセット: 正の値は右・下へ、負の値は左・上へ影を動かします。光が左上から来るなら、影は右下へ向かいます。
• ぼかし: 0だと輪郭がくっきりし、値が大きいほど縁が広くにじみます。負の値は使えません。
• 広がり: 正の値は影を四方へ大きくし、負の値は小さくします。内側の影では影が伸びる側が枠の内側になるため、正の値が大きいほど影の領域が広がります。
• 色: 不透明度が100%ならHEXで、それ未満ならrgba()で書きます。色を省略すると文字色(currentColor)が使われるため、このツールは色を必ず書き出します。
• inset: ボックスが背景から持ち上がったような影の代わりに、背景がボックスの内側へ影を落としているように描きます。

ぼかしの値は標準偏差の2倍です

CSSの仕様は、ぼかしを、標準偏差がぼかしの値の半分になるガウスぼかしで近似するよう定めています。各ピクセルはその結果と5%以内で一致する必要があります。そのため直線の縁では、影の輪郭を中心に内外へぼかしの値ずつ、つまりぼかしの2倍の幅にわたって濃さが変わります。影の輪郭のすぐ上の濃さは元の50%で、ぼかしの値だけ外側へ離れると2.3%まで下がります。このツールが「外側の余白」を、広がり + ぼかし ± オフセットで計算する理由です。

Chromium 151でぼかし16pxの影の断面を測ると、上の表の比率と2.2ポイント以内で一致しました。ぼかしを大きくすると、影のいちばん濃い部分は輪郭からぼかしの分だけ内側で始まるため、小さな要素に大きなぼかしを指定すると、濃い部分はほとんど残りません。

広がりと角丸

広がりは、影の輪郭の直線部分をその値だけ外へ押し出します。幅と高さは0より小さくなりません。角の半径にも広がりの値を加えますが、半径が広がりより小さいときは、丸い角と角ばった角が途切れないように加える量を減らします。半径をr、広げる量をeとすると、加える量はe × (1 + (r ÷ e − 1)³)です。内側の影で広げる量は、負の広がりの大きさになります。

ステージのガイド線の点線の輪郭は、この規則どおりに描いています。広がりが負の「下だけ」サンプル(0 10px 8px -8px)は、影をボックスより小さく縮めてから下へずらすので、上と左右にはほとんど影が見えません。

重ね影: 順序とやわらかい影

影はカンマでつないで複数指定できます。リストの最初の影が一番上に描かれ、残りは順にその後ろへ敷かれます。同じ色を重ねるときは順序がほとんど見えませんが、虹のリングのように色の違う広がりのリングを重ねるときは、小さいリングを手前に置かないとすべての色が見えません。

Ahlin(2019)は、オフセットとぼかしを1・2・4・8pxのように2倍ずつ増やした薄い影を重ねると、1層の影より縁を自然に扱えると紹介しています。下の表の「重なり部分の濃さ」は、すべての層が重なる中心部分の濃さを 1 − (1 − a₁)(1 − a₂)… で計算した値です。

「4層に分割」は、選んだレイヤーのオフセット・ぼかし・広がりを1/8・1/4・1/2・1にした4層を作ります。層ごとの不透明度は、重なり部分の濃さが元と同じになるよう 1 − (1 − a)^(1/4) で決めます。たとえば0 8px 8pxの不透明度48%を分割すると、0 1px 1px・0 2px 2px・0 4px 4px・0 8px 8pxがそれぞれ15%になり、やわらか4層と同じになります。層が増えたあとは、「すべてのレイヤー」の「小さく・大きく」(×0.8・×1.25)と「薄く・濃く」で全体を一度に調整します。

内側の影(inset)

内側の影は、パディングボックスの外側がすべて不透明だと見なして、その影をボックスの内側に描きます。影はパディングボックスの外へ出ず、要素の背景のすぐ上、枠線の下に描かれます。そのため枠線のある要素では、枠線の内側から影が始まります。

• 入力欄・押したボタン: 上側に薄い内側の影(inset 0 2px 4px)を置くと、欄が背景より低く見えます。
• 内側の線: inset 0 0 0 2pxはサイズを変えない枠線のように使えるので、選択中のカードを示してもレイアウトが揺れません。
• 凹んだ面: 背景と同じ色の要素に、暗い内側の影と明るい内側の影を反対向きに置くと、くぼんだ面に見えます。

たとえば内側の影をオンにして、横12px、縦8px、ぼかし18px、広がり−2px、色#336699、不透明度35%を入力すると、inset 12px 8px 18px -2px rgba(51, 102, 153, 0.35)になります。内側の影はボックスの外へ広がらないので、外側の余白には含まれません。

box-shadowとfilter: drop-shadow()の違い

box-shadowは要素の枠のボックス形で影を作り、drop-shadow()は要素を描いた結果の透明度の形に沿って影を作ります。透明なアイコンの形に切り替えて2つの方式を行き来すると、違いがすぐに分かります。

Filter Effects仕様は、drop-shadow()の3つ目の値を、ぼかし半径ではなく標準偏差と定めています。Chromium 151でdrop-shadow(… 10px)とbox-shadow … 20pxの断面が同じに描かれることを確かめており、このツールもdrop-shadowに切り替えるときはぼかしの値を半分にして書きます。広がりのあるレイヤーは広がりなしで、内側の影は除いて書き出し、その旨をコードの下に表示します。drop-shadowを複数つなぐと、後ろの影が前の影にもさらに影をつけるため、同じ値のbox-shadowの重ね影より濃く、広くなります。

影は場所を取りません

影はレイアウトに影響せず、ほかのボックスや文字と重なることがあります。スクロールも作らないので、影のせいでページが広がることはありません。その代わり、親要素にoverflow: hiddenがあるときや、カードがスクロールボックスの端に接しているときは、影が切れます。

切れないようにするには、外側の影ごとに、広がり + ぼかしから、その方向のオフセットを引くか足した距離だけ余白を取ります。ソフトのサンプル(0 4px 12px)なら、上8 · 右12 · 下16 · 左12pxです。ステージの黄色の点線とCSSの下の文が、今の影についてこの値を示します。

暗い背景と色つきの背景

影は背景を暗くして見せる効果なので、背景がすでに暗いとほとんど見えません。下の表は、黒20%の影が重なった場所の色と、その色と背景との明度コントラストを計算した値です。

同じ影が、白い背景では1.61:1で見えるのに、#0F172Aの背景では1.05:1となってほとんど消えます。暗い画面では、影を濃くするより、要素の面を背景より明るくしたり、上側に明るい内側の線を足して高さを表したりする方法のほうが、よく見えます。色つきの背景の上ではグレーの影が濁って見えることがあるので、「色つき影」のサンプルのように、その色に近い系統の影も検討します。

影を動かすとき

影は計算後の値どうしが混ざって動きます。2つのリストの長さが違うときは、短いほうの末尾に透明な0 0 0 0の影を足してそろえますが、同じ位置の影どうしでinsetの有無が違うと混ぜられず、値が一度に切り替わります。マウスを重ねたときにカードを浮かせたいなら、変化の前後で影の層数とinsetの並びを同じにしておくのが安全です。このツールのステージも、サンプルを切り替えるときはこの規則に従います。層の数が違ってもなめらかに変わりますが、同じ位置の影でinsetの有無が違うとすぐに切り替わります。端末で「視差効果を減らす(動きを減らす)」をオンにしていると、ステージのトランジションは無効になります。

ブラウザー対応

数字は、MDNのブラウザー互換性データで、その機能が最初に入ったバージョンです。Chrome 18とSafari 6のdrop-shadow()は-webkit-filterで使っていた時期の値で、今のブラウザーでは接頭辞は不要です。

よくある間違い

• 透明なPNGにbox-shadowを使う: アイコンの形ではなく四角い影ができます。drop-shadowを使います。
• drop-shadowにbox-shadowのぼかしをそのまま移す: 3つ目の値の意味が違うため、2倍ぼけます。半分にして書きます。
• 親のoverflow: hiddenを忘れる: カードの影が切れます。外側の余白の分だけ内側に余白を取ります。
• 黒100%に近い影: 画面が重く、汚れて見えます。ぼかしを大きくして不透明度を下げるか、層に分けます。
• 大きな正の広がり: ぼかしより広がりが大きいと、影が枠線のように見えます。広がりは小さな幅で調整します。
• 明るい画面の影を暗い画面にそのまま使う: コントラストが1.05:1まで落ちて、高さが見えなくなります。
• 最初の影が一番下だと思い込む: リストの最初の影が一番上です。

限界と注意

• 仕様はぼかしの正確な方法を定めておらず、ガウスぼかしと5%以内で一致すればよいとしています。ブラウザーによって、縁の濃さが少しずつ違うことがあります。
• プレビューは、今お使いのブラウザーが実際のCSSで描いたものです。ほかのブラウザーでの見え方は、そのブラウザーで確認してください。
• 長さはpxのみ、小数は1桁までです。横・縦は±300px、ぼかしは0〜300px、広がりは±150pxまで指定できます。バーはそれより狭い範囲だけ動き、入力欄には範囲全体を入力できます。
• 光を回したり「小さく・大きく」を押したりすると、値は0.1px単位に丸められます。何度も繰り返すと、最初の値と少しずれることがあります。
• 「重なり部分の濃さ」と「4層に分割」の不透明度は、同じ色を重ねるものとして計算した値です。色の違う層には当てはまりません。
• 外側の余白は、ぼかし半径までを影が届く範囲と見なしています。その外側にも、濃さ2.3%以下のごく薄い影が残ります。drop-shadowはボックスを基準に計算するため、アイコンのようにボックスより小さい形では、実際より広く出ます。
• MDNの互換性データには、Chrome・Firefox・Safariで外側の影がスクロールバーを作るという注記が残っています。Chromium 151では発生しませんでしたが、FirefoxとSafariは測っていません。
• 強制カラーモードでは、box-shadowがnoneになります。影だけで伝えている情報(フォーカス・選択・区切り線)は、枠線やoutlineでも示してください。

基準日 CSS仕様・MDN互換性データ・Ahlin(2019)・Material Componentsの値は、2026-10-21に原文で確認しました。表の濃さ・角の半径・コントラストはこのツールの計算コアで直接求めた値で、drop-shadowのぼかしとスクロールの有無はChromium 151で測った結果です。

出典

• 01W3C: CSS Backgrounds and Borders Module Level 3 — box-shadowCandidate Recommendation Draft 2024-03-11。§6.1 値の意味・省略した長さは0・色の既定値はcurrentColor、§6.1.1 影の形・広がりの角の式、§6.1.2 標準偏差 = ぼかし ÷ 2・5%の許容、§6.1.3 最初の影が一番上・レイアウトとスクロールに影響しない、アニメーションは計算後の値で補間
• 02W3C: Filter Effects Module Level 1 — drop-shadow()Working Draft 2018-12-18。3つ目の長さはぼかし半径ではなく標準偏差、広がりと複数の影は受け付けない
• 03W3C: CSS Color Adjustment Module Level 1Candidate Recommendation Snapshot 2025-12-16。§3.1 強制カラーモードではbox-shadowとtext-shadowがnoneとして計算される
• 04MDN: box-shadowブラウザー互換性表: 接頭辞なしでChrome 10・Edge 12・Firefox 4・Safari 5.1、外側の影とスクロールバーに関する注記
• 05MDN: drop-shadow()ブラウザー互換性表: Chrome 18・Edge 12・Firefox 35・Safari 6
• 06MDN: filterブラウザー互換性表: 接頭辞なしでChrome 53・Edge 12・Firefox 35・Safari 9.1、それ以前は-webkit-filter
• 07Tobias Ahlin: Smoother & sharper shadows with layered box-shadows2019-09-19。オフセットとぼかしを2倍ずつ増やした4・5・6層の例と不透明度(やわらか4層・くっきり5層・広い6層・夢心地6層のサンプルの値)
• 08Material Components for the web: _elevation-theme.scsselevation 2のumbra・penumbra・ambientの値と不透明度0.2・0.14・0.12(マテリアル2段のサンプル)

よくある質問

あわせて使いたいツール