box-shadowジェネレーター
X/Yオフセット・ぼかし・広がり・色・不透明度・insetを調整して、box-shadowのCSSをリアルタイムに生成します。
プレビュー
入力
CSS
box-shadow: 8px 8px 16px 0px rgba(26, 34, 48, 0.25);
※ rgba() で色と不透明度をまとめて出力します。複数影を重ねる場合は出力をカンマで連結してください。
解説
box-shadow は、CSSで要素のまわりに影を落とすプロパティです。ボタンやカードを浮かせて見せたり、奥行き・立体感を表現するのに使います。本ツールは、影を構成する各値をスライダーで調整しながらリアルタイムにプレビューし、貼り付けるだけで使える box-shadow のCSS1行を生成します。
box-shadow の値は「Xオフセット Yオフセット ぼかし半径 広がり半径 色」の順に並べます。例えば本ツールの既定色（RGB 26,34,48）で X=4・Y=4・ぼかし=12・広がり=0・不透明度30%なら、box-shadow: 4px 4px 12px 0px rgba(26, 34, 48, 0.3); のように出力されます。色は指定したHEXと不透明度を組み合わせて rgba() 形式で書き出されます。
各値の意味は次のとおりです。Xオフセットは影の左右位置（正の値で右へ）、Yオフセットは上下位置（正の値で下へ）、ぼかし半径は影のにじみ（大きいほどぼやける）、広がり半径は影のサイズ（正で拡大・負で縮小）です。不透明度（%）は影の濃さで、内部で 0〜1 のアルファ値に変換されます（例: 30% → 0.3）。
「inset」をオンにすると、要素の外ではなく内側に影が落ち、くぼんだ・へこんだような表現になります。このとき生成CSSは inset 4px 4px 12px 0px rgba(...) のように先頭に inset が付きます。フォーム入力欄の凹み表現などに使えます。
自然に見せるコツは、影の距離（オフセット）とぼかしを控えめにし、不透明度を下げて薄い影にすることです。例えば 0px 2px 8px の薄い影は、カードをわずかに浮かせる上品な見え方になります。逆に距離・ぼかしを大きくすると、より高く浮いた印象になります。
注意点として、box-shadow はカンマ区切りで複数の影を重ねて指定できますが、本ツールが生成するのは1つの影です。複数重ねたい場合は、生成したCSSをカンマでつないで手動で組み合わせてください。
よくある質問
box-shadowの値の順番は？
「Xオフセット Yオフセット ぼかし半径 広がり半径 色」の順です。例えば box-shadow: 4px 4px 12px 0px rgba(26, 34, 48, 0.3); で、右に4px・下に4px・ぼかし12px・広がり0px・濃さ30%の影になります。inset を付ける場合は先頭に書きます。
inset（内側の影）とは何ですか？
要素の内側に落ちる影で、へこんだような表現になります。本ツールでは「内側」に切り替えると、生成されるCSSの先頭に inset が付きます。
ぼかし半径と広がり半径の違いは？
ぼかし半径は影の輪郭のにじみ具合で、大きいほどぼやけます。広がり半径は影そのものの大きさで、正の値で影が拡大、負の値で縮小します。
不透明度はどう反映されますか？
影の濃さで、%で指定した値が rgba() のアルファ値（0〜1）に変換されます。例えば不透明度30%なら rgba(..., 0.3) として出力されます。
複数の影を重ねられますか？
box-shadow 自体はカンマ区切りで複数指定できますが、本ツールは1つの影を生成します。生成したCSSをカンマでつないで手動で重ねてください。