CSS box-shadowジェネレーター
box-shadow値を視覚的に作ります。水平と垂直のオフセットをピクセルで設定し、ぼかし半径（柔らかい端）、広がり（ぼかす前に影を大きくまたは小さく）、色、不透明度、内側の影向けの任意のinsetを設定します。
ボックスシャドウの作り方
1. XとYのオフセットを設定します——正のXは影を右へ、正のYは下へ動かします。
2. ぼかし（柔らかさ）と広がり（ぼかす前のサイズ）を調整します。
3. 影の色と不透明度を選びます。
4. 影をボックスの内側に出すならinsetを切り替え、CSSをコピーします。
シャドウのレシピ
柔らかいカードの浮き
offsetY 8px、blur 24px、spread 0、黒18%不透明度——Material風の浮かぶカード: box-shadow: 0 8px 24px rgba(20,20,20,0.18)。
シャープなドロップシャドウ
blur 0、spread 0、offsetY 4px ——ページからわずかに浮いたステッカーのような硬い端。
Insetの押されたボタン
小さなぼかしでinsetを有効に——要素の内側に押された、または凹んだコントロールをシミュレートします。
このツールを使うとき
• カード、モーダル、ボタンのUIの奥行きを調整するとき。
• ぼかしと広がりの違いを学ぶとき。
• 正確なシャドウ値でデザイントークンを文書化するとき。
4つの数字の読み方
box-shadow: 0 8px 24px 0 は x=0、y=8px下、blur=24px、spread=0 を意味します。広がりを省略するとブラウザはspreadを0にします。オフセット0の大きなぼかしはグローを作り、小さなぼかしの大きなオフセットは方向のある光を作ります。
よくある質問
box-shadowの構文は何ですか？
box-shadow: offset-x offset-y blur-radius spread-radius color; 任意のinsetキーワードで内側の影になります。
ぼかしと広がりは？
ぼかしは影の端を柔らかくします。広がりはぼかす前に影の形を拡大または縮小します——正の広がりは大きく、負は小さくします。
どの単位を使うべきですか？
このツールはピクセル（px）を出力します。画面UIシャドウで最もよく選ばれます。
insetは何をしますか？
Insetは要素のボーダーボックスの内側に影を描きます——沈んだ入力やウェルに便利です。
影の色は半透明にできますか？
はい。不透明度は選んだ色に適用され、さまざまな背景の上で滑らかな端になるrgba出力になります。