CSS Box Shadowジェネレーター
美しいシャドウを視覚的に作成して、CSSをコピーします。
プリセット
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
使い方
- スライダーをドラッグして、水平/垂直オフセット、ぼかし、拡張、不透明度を調整します。
- シャドウの色を選択し、必要に応じて「inset」を有効にします。
- 「シャドウレイヤーを追加」をクリックして、複数のシャドウを重ねます。
- クイックスタートポイントとしてプリセットを使用します。
- 「CSSをコピー」をクリックして、結果をスタイルシートに貼り付けます。
よくある質問
CSSのbox-shadowとは?
CSSのbox-shadowプロパティは、要素の周りにシャドウ効果を追加します。水平オフセット、垂直オフセット、ぼかし半径、拡張半径、色の値を取ります。
複数のシャドウを追加できますか?
はい。「シャドウレイヤーを追加」をクリックして別のシャドウを追加します。複数のシャドウはCSS出力でコンマで区切られます。これにより複雑な階層効果を作成できます。
insetキーワードは何のために使われますか?
「inset」を追加すると、シャドウが要素の外側ではなく内側に表示され、内側のシャドウや「凹んだ」効果を作成します。
box-shadowの5つのパラメーター
CSS box-shadow は要素のボーダーボックスに1つ以上のドロップシャドウエフェクトを付与する。文法は box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset? で、複数のシャドウはカンマ区切りだ。各パラメーターは特定の役割を持つ：
- offset-x：シャドウの水平方向のずれ量。正値で右に移動し、負値で左に移動する。
0は水平方向に中央揃えとなる。 - offset-y：垂直方向のずれ量。正値で下に移動する（最も一般的なUIの慣例である頭上照明を模倣）。負値で上に移動する。
- blur-radius：シャドウの端が透明にフェードする距離。ガウス畳み込みとして実装され、値が大きいほどより柔らかく広く拡散したシャドウになる。負の値は無効で、
0はシャープなエッジを作る。 - spread-radius：ぼかし適用前にシャドウの形を拡大（正値）または縮小（負値）する。正のspreadはシャドウをあらゆる方向に広げ、負のspreadは縮小させてシャドウをboxの一辺に限定できる。
- color：デフォルトは
currentcolor（要素自身のcolor値で、意外な挙動になることがある）。UIシャドウはほぼ常に低アルファの黒または黒に近い色、rgba(0,0,0,0.05)からrgba(0,0,0,0.25)を使う。ベタの黒シャドウは重く不自然に見えるためだ。 - insetキーワードは、シャドウを外側ではなくbox内側に描画する。押されたボタン状態、くぼんだ入力フィールド、内側グローに使われる。
ブラウザはシャドウのリストを前面から背面へ合成する：最初に記述したシャドウが最も手前にあり、最後のシャドウが最も奥になる。これは text-shadow や background と同じ並び順だが、ほとんどのCSSルールのカスケードとは逆であり、新しい作者がよく驚く点だ。
Material Designの2シャドウ高さシステム
GoogleのMaterial Design（2014年5月導入；Material Design 3は2021年）は、UIサーフェスが密度非依存ピクセル単位の複数のレベルのどれかに位置する定量化された高さシステムを定義している。各レベルのシャドウレシピは2つの重ねたシャドウを使う：
- Umbra（キーシャドウ）：より小さく暗い。サーフェス直下の光を直接遮ることを表現する。短いオフセットとぼかし。
- Penumbra（アンビエントシャドウ）：より大きく拡散している。部屋を跳ね回る散乱光を表現する。大きなオフセット、大きなぼかし、薄いアルファ。
Material Design 2では高さの値は0dp（シャドウなし）から24dpまであり；カードは通常、静止時に1〜2dp、ホバー時に8dpにアニメーションし、モーダルダイアログは24dpを使う。Material Design 3はスケールを5つの名前付きレベル（1〜5）に縮小し、ダークテーマにドロップシャドウに加えてティントオーバーレイを追加した。umbraとpenumbraの構造はビジュアルモデルとして残っており、Tailwindの shadow-md が2つの重ねたシャドウ 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) として提供される理由だ。
ニューモーフィズム：2つの対向するシャドウが必要なトレンド
ニューモーフィズム（「new」と「skeuomorphism」の合成語）は、ウクライナのデザイナーAlexander Plyutoが2019年12月にDribbbleに投稿した「Skeuomorph Mobile Banking」が数週間で数万いいねを集めたことで、2019年末から2020年初頭にかけてバイラルな人気を博した。基本レシピは親と同じ背景色を持つ要素に2つのbox-shadowを設定することだ：右下に暗いシャドウ、左上に明るいシャドウ。暗い面は光源から離れて遠ざかるサーフェスを表現し、明るい面はそれが光に向かって持ち上がるハイライトを表現する。オフセットを反転（または両方に inset を追加）すると凹んだ/押された外観になる。
アクセシビリティに関する正直な注意：ニューモーフィズムは、要素と背景のビジュアルコントラストが必然的に非常に低くなる（同じ色を共有するため）として広く批判されてきた。ボタンや入力欄がWCAG 1.4.11（非テキストコントラスト、AA、UIコンポーネントと隣接色の3:1比）に失敗することがある。押された状態と押されていない状態は微妙なシャドウの方向でのみ区別されることが多く、スクリーンリーダーには伝わらず、弱視、色覚異常、または画面の反射がある人には見えない。このスタイルは装飾的なサーフェスに限定して使い、プライマリコントロールには使わないこと。
box-shadow と filter: drop-shadow() の比較
CSSフィルターエフェクトは代替として filter: drop-shadow(<x> <y> <blur> <color>) を定義している：視覚的に似ているが重大な違いがある。box-shadow は（border-radius があれば丸められた）ボーダーボックスの矩形のシャドウを投影する。drop-shadow はレンダリングされた要素のアルファチャンネルのシャドウを投影し、子要素、透過PNG、くり抜きのあるSVG図形、マスクされたコンテンツを含む。drop-shadow を選ぶ最も一般的な理由は、シャドウをかけたい要素が矩形でない場合だ：透過PNGアイコン、SVGロゴ、吹き出しの三角形など。
box-shadow | drop-shadow() | |
|---|---|---|
| Spreadパラメーター | あり | なし |
| Insetバリアント | あり | なし |
| 複数シャドウ | あり（カンマ区切り） | あり（フィルターの連結） |
| 子孫への影響 | なし | あり（サブツリー全体） |
| クリッピング | overflow:hidden の外側に拡張可能 | フィルター境界内に制限される |
| パフォーマンス | コンポジターフレンドリー | フィルターパスが発生する |
パフォーマンスの注意事項
box-shadowはリアルタイムレンダリングのコストが高いCSSプロパティのひとつだ。コストには3つの要因がある：ぼかしカーネルサイズ（ガウスぼかしは分離可能な2パス畳み込みで、ぼかし量が2倍になると1ピクセルあたりの処理は4倍になるため、大きなカードに100pxのぼかしをかけるとスクロール中のフレームレートが目に見えて低下する）、シャドウのサーフェス面積（spreadで拡張されぼかしでさらに拡大された矩形がGPUのラスタライズ対象であり、大きなモーダルオーバーレイのシャドウが最もコストが高い）、そして再描画（box-shadow をアニメーション化すると毎フレームシャドウ領域の再描画が発生する）。
実践的な推奨事項：
- ホバー時の高さアニメーションには
transform: translateY()とopacityのアニメーションを優先し、box-shadowは使わない。これらはGPUアクセラレーションで描画をトリガーしない。 - ホバー時のシャドウ切り替えには両方のシャドウを疑似要素に宣言し、大きい方を
opacity: 0にしてから疑似要素のopacityをアニメーション化する。これでぼかしカーネル自体をアニメーション化せずにシャドウを切り替えられる。Tobias Ahlinの「Shadow Tricks」（2017年）が公式の解説だ。 will-change: transformはブラウザに要素を独自のコンポジターレイヤーへ昇格させるヒントを与えられる。使いすぎに注意。多くの要素を昇格するとGPUメモリを消費する。- 大量のスクロールコンテンツを含む要素にbox-shadowを使わない。スクロールのたびにシャドウを再描画する必要がある。
アクセシビリティ
シャドウはアクセシビリティツリーの観点では装飾（スクリーンリーダーは無視）だが、次の影響がある：
- WCAG 1.4.11 非テキストコントラスト（AA、3:1）。カードやボタンがシャドウだけで背景と区別されている場合、そのシャドウが実質的なビジュアルエッジを定義することになる。白に近い背景への薄い
rgba(0,0,0,0.05)シャドウは3:1の閾値を満たさないことがある。多くのデザインシステムはコントラストを確実にするためにシャドウと1pxのソリッドボーダーを組み合わせている。 - フォーカスインジケーター。
box-shadow: 0 0 0 3px <color>はブラウザデフォルトのoutlineに代わるモダンな手法で、border-radiusに従って描画される。リングはWCAG 2.4.7 フォーカス可視性を満たす必要がある：最小2CSSピクセル幅で、フォーカスなし状態と隣接色に対して3:1のコントラスト。 - 強制カラー / Windowsハイコントラストモード。
forced-colors: activeモードではブラウザはほとんどのCSS色を無視し、ユーザーのシステムパレットでコンテンツを再配色する。box-shadowは除去または縮小される；UI状態にはこれらのユーザーのために常にシャドウ以外のインジケーター（ボーダー変更、色変更、アイコン、テキストラベル）を持たせること。 - モーション軽減。
prefers-reduced-motion: reduceを持つユーザーにはホバーやスクロール時の大きなシャドウアニメーションを表示すべきでない。アニメーション付きトランジションをメディアクエリに包み、これらのユーザーには静止シャドウを維持する。
クイックレシピ
| エフェクト | CSS |
|---|---|
| 控えめなカードリフト | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| ソフトなモダンカード | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| 重いモーダルリフト | 0 25px 50px -12px rgba(0,0,0,0.25) |
| シャープ1pxスタンプ | 0 0 0 1px rgba(0,0,0,0.05) |
| フォーカスリング（3px） | 0 0 0 3px rgba(59,130,246,0.5) |
| インセット入力フィールド | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| グローハロ | 0 0 20px 4px rgba(99,102,241,0.6) |
よくある質問
なぜシャドウがクリップされるのか？
ほぼ常に、祖先要素に overflow: hidden があるためだ。シャドウはボーダーボックスを超えて伸びるが、祖先の端でクリップされる。2つの修正法：シャドウを祖先自体に移すか、オーバーフロークリッピングのないラッパー要素を使う。filter: drop-shadow() はこの問題を持たないが独自のトレードオフがある。
-webkit-box-shadow のようなベンダープレフィックスはまだ使うべきか？
いいえ。プレフィックスなしの box-shadow は2012年頃から普遍的にサポートされている。ベンダープレフィックスは2026年のコードでは純粋なノイズであり削除すべきだ。2010年代初頭のCSSリセットライブラリは防御的にそれらを含んでいたが、現代のコードは安全に削除できる。
boxではなくテキストにシャドウを適用するにはどうするか？
text-shadow を使う。同じオフセット / ぼかし / 色の文法だがspreadとinsetがない。スタイリッシュなテキスト（例：background-clip: text グラデーションテキスト）のグリフ形状のシャドウには親要素の filter: drop-shadow() が適切なツールで、box-shadow はグリフの後ろに矩形のシャドウを投影してしまう。
なぜ 0 0 0 2px のシャドウが柔らかく見えないのか？
3番目の値（blur-radius）が 0 だからだ。ぼかしなしのspreadのみのシャドウはシャープなソリッドアウトラインを生成する。これはフォーカスリングや「フェイクアウトライン」のトリックには最適だが、柔らかい高さ表現には向かない。ぼかしを追加する：0 0 4px 0 rgba(0,0,0,0.2)。
何かサーバーに送信されますか？
いいえ。プレビューはスライダーを動かすたびにブラウザ内で再レンダリングされ、CSS文字列はローカルで生成され、コピーはクリップボードに書き込まれる。ページはロード後オフラインで動作する。