CSSボックスシャドウ生成ツール
視覚的なプレビューを見ながらCSS box-shadowを生成します。X/Y方向のオフセット・ぼかし・広がり・色・不透明度を調整してコードをコピーするだけ。
このツールは現在準備中です。
使い方
各パラメータを調整
スライダーや入力欄でX/Y方向のオフセット・ぼかし・広がりを調整します。影の色と不透明度も変更できます。
プレビューで確認
パラメータを変えるとプレビューがリアルタイムで更新されます。実際の見た目を確認しながら調整してください。
CSSコードをコピー
「コピー」ボタンでCSS box-shadowプロパティの値をコピーします。スタイルシートに貼り付けてすぐに使えます。
よくある質問
通常の影は要素の外側に落ちますが、insetを指定すると要素の内側に影が描画されます。ボタンを押したときの凹み効果や、入力フォームの内側の強調などに使われます。
ぼかし半径（blur）は影のエッジをどのくらいぼかすかを指定します（0でくっきり）。広がり半径（spread）は影のサイズを拡大・縮小します（正の値で拡大、負の値で縮小）。
CSSでは box-shadow にカンマ区切りで複数の影を指定できます。例えば `box-shadow: 2px 2px 4px red, -2px -2px 4px blue;` のように書きます。このツールは1つの影を生成しますが、生成したコードをカンマでつなげて使えます。
box-shadow の書式は「水平オフセット 垂直オフセット ぼかし半径 広がり半径 色」です。inset を指定する場合は先頭に追加します。単位はすべてpxです。