Box Shadowジェネレーター
無料オンライン CSS box-shadow 生成ツール、リアルタイムプレビュー
CSS box-shadowの構文
box-shadow CSSプロパティは要素に影の効果を追加します。構文：box-shadow: [inset] offset-x offset-y blur spread color。複数の影はカンマで区切ります。ビジュアルエディタで値を調整してリアルタイムに結果を確認できます。
ボックスシャドウジェネレーターの使い方
オフセットX、オフセットY、ぼかし半径、広がり半径のスライダーを調整します。影の色を選択し、内側の影オプションを切り替えます。生成されたCSSコードがリアルタイムで更新され、クリップボードにコピーできます。
▶ぼかしと広がりの違いは？
ぼかしは影の縁の柔らかさを制御します（0 = 鋭い縁、値が大きいほど柔らかい）。広がりはすべての方向に影を拡大または縮小します。正の広がりは要素より大きな影を作ります。
▶複数の影を追加できますか？
はい、CSSはカンマ区切りで複数の影をサポートしています。微妙な影を組み合わせると、よりリアルな奥行き効果が得られます。
▶内側の影（inset）はどういう効果ですか？
内側の影は要素の外側ではなく内側に表示されます。テキスト入力やボタンのくぼみのような、要素がへこんで見える効果を作ります。