box-shadowジェネレーター

スライダーでオフセット、ぼかし、広がり、色、不透明度を調整すると、プレビューボックスがリアルタイムで更新されます。生成されるCSSはドラッグするたびに更新されるので、そのままスタイルシートにコピーできます。

入力したデータはどこかに送信されますか？

いいえ、処理はすべてブラウザ内で完結するため、何かをアップロードすることも、作った内容が外部で追跡されることもありません。

オフセット・ぼかし・広がりは実際に何を変えていますか？

水平オフセットと垂直オフセットは、影をボックスから離す方向を決めます。正の値なら右下へ、負の値なら左上へ影がずれます。ぼかしは影の輪郭のやわらかさを決め、0ならくっきりとしたシルエット、値を大きくするほどぼんやりと広がった光のように見えます。広がりは、ぼかしを適用する前の段階で影の形そのものを膨らませたり縮めたりするパラメーターで、正の値にすると影がボックスの全方向に対して元より大きくなり、負の値にすると内側に縮みます。色と不透明度はセットで働き、好きな16進カラーを選ぶと不透明度スライダーがその濃さを調整し、ツールが内部で標準的なrgba()値に変換します。insetを切り替えると、影がボックスの外側に落ちる状態から内側に入り込む状態へ反転し、浮き出たような見た目ではなく、押し込まれた・彫り込まれたような見た目を作れます。

複数レイヤーの影はどう組み合わさりますか？

レイヤーを追加すると、CSSの仕様どおりに影を重ね、最終的なbox-shadow値の中でカンマ区切りにまとめられます。よくあるパターンは、ボックスのすぐ近くに小さく濃く不透明度の低い影を置き、その外側にもっと柔らかく大きく薄い影を重ねる組み合わせで、単一の影よりも自然な奥行きを表現できます。レイヤーは追加した順番どおりに描画され、最初に追加したレイヤーが一番手前に来ます。これはブラウザがカンマ区切りのbox-shadow値を描画する順序と同じです。同じスタックの中にinsetありのレイヤーとなしのレイヤーを混在させることもでき、外側にうっすらとした影を、内側にわずかなハイライトを同時に持たせたいカードなどで役立ちます。

よくある用途は、奥行きを出したいカードやボタン、ニューモーフィズムやinset効果、あるいはピクセル値を手探りで決めずに影を調整することです。構文の詳細とブラウザ対応状況はMDNのbox-shadowリファレンスを、生成されるCSSに含まれるrgba()の仕組みについてはMDNのCSSカラーガイドを参照してください。