Box Shadowジェネレーター

このツールが生成するのは単一の影だけです。box-shadow はカンマ区切りで複数の影を並べられるので、重ねたい場合は生成した値をそれぞれコピーし、「box-shadow: 影1, 影2;」の形に自分で結合してください。先に書いた影ほど手前に描画され、後ろの影は前の影に隠れます。

カラーピッカーが返す16進カラー（#000000 など）を r, g, b の3成分に分解し、不透明度スライダーの値を第4引数にして rgba(0, 0, 0, 0.3) のような形に組み立てているためです。影は下地の色に半透明で重なるのが自然に見えるため、不透明度を独立して扱える rgba() を出力形式にしています。#RRGGBBAA や hsl() での出力には対応していません。

Spread は影の形そのものを指定した px だけ全方向に拡大（負なら縮小）する値で、輪郭ははっきりしたままです。Blur はその輪郭をガウスぼかしで柔らかくする値で、大きいほど影の縁が広く薄く溶けていきます。Blur を 0 にすると縁がくっきりした「ベタ影」になり、Spread を負にすると要素より小さい影が作れるため、下方向にだけ影を出したいときなどに使います。

X・Y・Blur・Spread がすべて 0 だと、影は要素の真下に同じ大きさで描かれるため要素自身に完全に隠れ、画面上には現れません。Blur か Spread のどちらかを正の値にすると要素の外側にはみ出す部分ができて影が見えるようになります。逆に「全方向に均等な影」を作りたい場合は、オフセットを 0 にして Blur と Spread だけで調整するのが基本です。

inset を付けると影が要素の枠線の内側に描かれ、要素がくぼんで見える表現になります。押し込まれたボタン、入力欄のフォーカス表現、カードの内側にわずかな陰影を付けるといった用途が代表的です。inset の影は要素の背景の上・内容の下に描かれるため、テキストや画像が隠れることはありません。オフセットの正負も反転して見え、X・Y を正にすると左上側の縁に影が寄ります。

box-shadow は要素のボックスの外側に描かれますが、レイアウト上の幅や高さには含まれません。そのため親要素に overflow: hidden や overflow: auto が指定されていると、親の境界で影が切り取られます。親に余白（padding）を持たせるか、overflow の指定を見直してください。また、影は要素の border-radius に沿って描かれるため、角丸の要素では影も同じ丸みになります。

ぼかし処理は影の面積と Blur 半径に応じた計算を必要とするため、Blur 値が大きい影や、カンマ区切りで多数重ねた影を多くの要素に付けると、スクロールやアニメーション時の再描画コストが上がる場合があります。特にホバー時に box-shadow を transition で変化させる場合は、影の値そのものをアニメーションさせるより、影付きの疑似要素の opacity を変える方法が負荷を抑えやすいとされています。