CSS Box Shadow ジェネレーター
水平・垂直オフセット、ぼかし、スプレッド、色、内側影（inset）を指定してCSSのbox-shadowプロパティのコードを生成するオンラインツールです。
ツールを実行
CSS Box Shadow Generatorは、Webデザインにおける要素の影効果（box-shadow）のコードを作成できるオンラインツールです。水平方向のオフセット（Offset X）、垂直方向のオフセット（Offset Y）、ぼかし半径（Blur）、スプレッド半径（Spread）、影の色（Color）、内側への影（Inset）を自由に調整できます。各数値を変更すると、ピクセル単位（px）が付与された正確なCSS宣言が生成されます。すべてのオフセットやぼかし、スプレッドに0を指定した影や、半透明色を指定した微細なシャドウ、内側影（inset）を有効にした窪み表現など、用途に合わせて手軽にCSSコードを作成できます。
使い方
- 水平オフセット（Offset X）と垂直オフセット（Offset Y）に数値を入力します。
- 必要に応じてぼかし（Blur）とスプレッド（Spread）の数値を設定します。
- 影の色（Color）をカラーコードなどのテキスト形式で指定します。
- 要素の内側に影を落としたい場合は、Insetのチェックボックスを有効にします。
- ボタンをクリックすると、入力値に基づいたbox-shadowのCSS宣言が出力されます。
使用例
- Offset X: 2、Offset Y: 4、Blur: 6、Spread: 0、Color: #00000033、Inset: false を指定した場合、外側に自然な影を落とすCSS宣言が出力されます。
- Offset X: 0、Offset Y: 2、Blur: 4、Spread: 1、Color: #1e293b20、Inset: true を指定した場合、内側に影を付ける「inset」キーワードを含んだCSS宣言が出力されます。
よくある質問
未入力の項目がある場合はどうなりますか？
各入力欄には既定値（Offset X: 2、Offset Y: 2、Blur: 5、Spread: 0、Color: #00000033、Inset: 無効）があらかじめ設定されており、空欄の場合は既定値をもとにコードが作成されます。
内側シャドウ（inset）を有効にするとどのように出力されますか？
Insetのチェックを有効にすると、生成されるCSSコードに「inset」キーワードが含まれ、要素の内側に影が描画されるスタイルになります。
すべての数値を0に設定することはできますか？
はい、オフセット、ぼかし、スプレッドのすべてに0を指定してCSS宣言を生成することが可能です。