接地影＋環境影の控えめなカード
2 レイヤーの控えめなカード
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);短くタイトな影が接地点を、長く柔らかな影が環境光のはね返りを表します。多くのモダンなデザインシステムが採用している黄金パターンです。
CSS box-shadow ジェネレーター
多層 CSS box-shadow をライブプレビューで設計し、本番投入できる CSS をコピー。
最終更新
プレビュー
シャドウレイヤー
CSS
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);CSS box-shadow ジェネレーターとは？
box-shadow はどんな要素にもドロップシャドウや光、内側のへこみを加える CSS プロパティです。フラットな見た目に *浮き* を与える最大のテコで、カードは紙面から離れて見え、モーダルはコンテンツの上に浮かび、ボタンは押せそうに見えてきます。
ポイントは、*良い*影はほぼ単一レイヤーで成立しないということ。現実の影は柔らかく、環境光のはね返りも乗っています。Material、iOS、Tailwind など主要なデザインシステムは、オフセットと不透明度を変えた box-shadow 宣言を 2〜3 段重ねます。手で書くと面倒ですが、ジェネレーターを使えば各レイヤーを視覚的に調整し、合成結果をリアルタイムで確認できます。
Coddy のジェネレーターは、レイヤー数無制限、*外側* と *inset* の両対応、レイヤーごとの色と不透明度、そしてよく使うパターンのプリセット（控えめなカード／シャープなドロップ／ブランドの発光／インセットの井戸／ニューモーフィズム）に対応しています。生成された CSS をコピーしてスタイルシートに貼り付けるだけ - アップロードもアカウントもウォーターマークもありません。
box-shadow について知っておきたいこと
- 構文は
box-shadow: [inset] <x> <y> <blur> <spread> <color>です。insetを付けると影は要素の *内側* に、付けなければ外側に落ちます。 - *Blur* はエッジを滑らかにします。値を大きくするほど影は拡散して柔らかくなります。*Spread* は blur 適用前の影を太らせたり細らせたりします（負の値は引き締めるので、優しい内側リフトに有効）。
- 複数の影はカンマ区切りで、宣言順に「奥から手前」へ重なります。最初に書いた影が一番下に来ます。
box-shadow の作り方
プリセットから始める
目指す感触に近いプリセットを選びましょう。控えめなカード／柔らかな浮き／シャープなドロップ／ブランドの発光／インセットの井戸／ニューモーフィズムが用意されています。微調整のスタート地点として使えます。
アクティブレイヤーを調整
X/Y・blur・spread・色・不透明度のスライダーを操作します。左側のプレビューが即時に更新されます。不透明度を下げて blur を上げるほど影は *柔らかく* なります。
レイヤーを追加して重ねる
*レイヤーを追加* で 2 つ目の影を重ねます。リアルな奥行きはほぼ常に 2 層構成です - 短くタイトな接地影と、長く柔らかな環境影。
内側の井戸用に inset をオン
*Inset* をオンにすると、影は要素の内側に描かれます。控えめな外側影と組み合わせると、押し込まれたボタンの効果になります。
CSS をコピー
プレビューがデザインに合ったら *CSS をコピー*。生成されるルールにはアクティブな全レイヤーが含まれているので、スタイルシートへそのまま貼り付けてください。
box-shadow クイックリファレンス
box-shadow: x y blur spread color の各値と役割。
| 値 | 効果 | 目安レンジ |
|---|---|---|
| X オフセット | 水平方向の移動量。正の値で右へ | −40px 〜 40px |
| Y オフセット | 垂直方向の移動量。正の値で下へ | 自然な光なら 0px 〜 40px |
| Blur | エッジをぼかす | 0px 〜 80px |
| Spread | blur 前の影を太らせ／細らせる | −30px 〜 30px |
| 色 | 任意の CSS カラー。rgba() でレイヤーごとに不透明度を調整可 | 自然な影なら rgba(0,0,0,0.05–0.3) |
inset | 影を要素の内側に描く | - |
| 複数レイヤー | カンマ区切り、奥から手前へ重なる | 2〜3 層でリアルな奥行き |
試したい box-shadow の例
ブランドの発光
ふんわりした色付きグロー
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);X と Y を 0 にして放射が均等になるようにします。小さな正の spread でグローを少し太らせてから blur で柔らかくする流れです。色付きグローは目立つので使いどころを絞りましょう。
押し込み風の inset
押し込み感のための inset 影
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);inset 影は要素の内側に描かれます。柔らかな影で「窪み」を、1px の inset で「内側の縁」を表現すると、押し込まれた井戸のように見えます。
box-shadow でよくあるミス
- 高い不透明度の真っ黒を使う。影というより硬い切り抜きに見えます。自然な浮きなら不透明度 0.06〜0.18 へ。
- Y オフセットを 0 にしてしまう。X=0/Y=0 だと影は要素の真後ろに均等に出ます - グローには良いですが、浮いて見せたいカードには不向き。
- レイヤーを重ねすぎる。多くの場合 3 層で十分。10 層になるとぼけた塊になり、ペイントコストも目立ちます。
CSS box-shadow に関するよくある質問
box-shadow の各値は何を意味しますか？
box-shadow: x y blur spread color です。最初の 2 つはオフセット、*blur* はエッジのぼかし、*spread* は blur 前の大きさ、色は任意の CSS カラー（rgba() で不透明度指定）。先頭に inset を付けると要素の内側に描かれます。1 つのルールで複数の影をどう重ねますか？
カンマ区切りで列挙します。記述順に「奥から手前」へ重なるので、最初に書いた影が最下層になります。短い接地影と長い環境影を組み合わせるのに便利です。
box-shadow と filter: drop-shadow() の違いは？
box-shadow は要素の矩形に沿って描画され、低コストです。drop-shadow() はアルファチャンネルに沿うため SVG や透過 PNG に強い一方、レンダリングコストは高くなります。カードやボタンには box-shadow、不規則形には drop-shadow() を使い分けるのがおすすめです。影がジャギーに見えるのはなぜ？
blur が非常に小さい（blur 0 は意図的にシャープ）か、要素がスケールされているかのいずれかです。blur を上げるか、上位ノードに
transform: scale() が無いか確認してください。box-shadow はレイアウトに影響しますか？
影響しません。影は要素の枠外に描かれますが、隣接コンテンツを押し出すことはありません。親要素に余白が必要なら padding を増やすか
overflow: visible を指定してください。