このツールについて
CSS の box-shadow は、要素の枠の周りに 1 つ以上の影を描画します。各影は、オプションの inset キーワード、水平・垂直のオフセット、ぼかし半径、広がり半径、色という一連の値で構成されます。複数の影はコンマで区切られ、後ろから前へと描画されるため、リストの最初の影が一番上に重なります。低い不透明度の影を複数重ねることが、現実味のある立体感、柔らかな環境光、内側のグローを作り出す方法であり — 単一の影が自然に見えることはまずありません。
カードやモーダルの立体感のデザイン、フォーカスリングや内側グローの効果の微調整、レイヤーを重ねた Material 風の奥行きの再現、スタイルシートに反映する前のホバー状態の素早いプロトタイピングに使えます。プリセットを選んで始め、各レイヤーのスライダーを調整し、くぼんだ影には inset を切り替え、生成されたルールを CSS や Tailwind の任意値に直接貼り付けてください。
色は rgba() として出力されるため、不透明度スライダーがアルファチャンネルに直接対応します — 基になる hex はそのまま保たれるので、あとから手作業で調整しやすい値のままです。
よくある質問
レイヤー化された (複数レイヤーの) box-shadow を作成するにはどうすればよいですか?
1 つの box-shadow 宣言の中で、コンマで区切った複数の影定義を指定します。各レイヤーは独立してレンダリングされ、後ろから前へと重なり、最初に列挙した影が一番上に描かれます。低い不透明度のレイヤーをいくつか組み合わせると、単一の影よりも柔らかく現実味のある奥行きが得られます。
box-shadow のぼかしと広がりの違いは何ですか?
ぼかしは 4 番目の値で、影の縁の柔らかさを制御します — 値が大きいほどぼかしが広がります。広がりは 5 番目のオプション値で、ぼかしが適用される前に影のサイズを拡大 (正の値) または縮小 (負の値) します。したがって負の広がりは、影を要素に向かって引き締めます。
box-shadow の inset キーワードは何をしますか?
inset を追加すると、影は要素のボックスの外側ではなく内側に描画され、くぼんだ効果や内側グローの効果を生み出します。inset がない場合、影は通常のドロップシャドウとして外側に描かれます。