CSSシャドウ生成

スライダーでシャドウを形作り、CSSをコピー。

0
1
3
0
12
ボックスと背景
18

ブラウザ内で動作します。入力した内容はどこにも送信されません。

CSSボックスシャドウの作り方

  1. プリセットから始めるか、オフセット・ぼかし・広がりのスライダーを動かします。
  2. レイヤーを追加すると、より柔らかく自然な影になります。
  3. box-shadowの行をコピーしてCSSに貼り付けます。

box-shadowの各値の役割

値意味一般的な範囲
オフセットX影を右へ、マイナスなら左へ動かす-100〜100px
オフセットY影を下へ、マイナスなら上へ動かす-100〜100px
ぼかし輪郭を柔らかくする。0だとくっきりした影に0〜200px
広がりぼかす前に影を拡大・縮小する-100〜100px
不透明度影の色がどれだけ濃く見えるか自然に見せるなら10〜30%

よく使う見た目の初期値

プリセットオフセットYぼかし広がり不透明度
ソフト10px30px-5px20%
シャープ6px（Xも同じ）0px0px100%
グロー0px24px4px55%
インセット2px6px0px25%

「レイヤード」と「フローティング」は、これらを2〜3枚同時に重ねることで作られており、1枚のレイヤーだけでは再現できません。

自然に見える影を作るコツ

  • 実際の光が完全な黒の影を作ることはほとんどありません。不透明度は10〜30%程度にし、色を背景の色相に近づけると柔らかい印象になります。
  • 「レイヤード」や「フローティング」のプリセットのように、ボックスに近い小さくて締まった影と、少し離れた大きくぼやけた影の2〜3枚を重ねましょう。
  • 垂直オフセットを大きくして広がりをマイナスにすると、最近のインターフェースでよく見る浮いたカードのような見た目になります。
  • overflow: hiddenが設定された親要素は、コンテンツと同じように影も切り取ります。あちこちでoverflowを外すのではなく、親要素にパディングを追加しましょう。

ボックスシャドウ生成のFAQ

box-shadowの値はそれぞれ何を意味しますか？

順に、水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色です。正の値のオフセットは影を右と下に動かし、insetキーワードを付けるとボックスの内側に描画されます。

自然に見える影を作るには？

不透明度の低いソフトな影を2〜3枚重ねます。ボックスに近い小さくて濃い影と、少し離れた大きくぼやけた影を組み合わせましょう。実際の影は完全な黒で強く出ることはあまりありません。

広がり（spread）は何をしますか？

ぼかしをかける前に影を大きくしたり小さくしたりします。垂直オフセットを大きくして広がりをマイナスにすると、浮いたカードのような見た目になります。

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

親要素にoverflow: hiddenが設定されていると、影を含めボックスの外に描かれるものはすべて切り取られます。親要素にパディングを追加するか、overflowの設定を外してください。

影のレイヤーはいくつまで重ねられますか？

このページでは最大8枚です。CSS自体にbox-shadowのレイヤー数の上限はありませんが、3〜4枚を超えるとほとんど見た目が変わらず、描画の負荷だけが増えます。

box-shadowは要素のサイズや余白に影響しますか？

いいえ。box-shadowは見た目だけのもので、borderやoutlineと違いレイアウトには一切影響しません。追加したりサイズを変えたりしても、隣接する要素がずれることはありません。

関連ツール