コンテンツへスキップ
Box Shadow Generator
オフセット・ぼかし・色を指定してCSSのbox-shadowを生成します。
概要
- オフセット・ぼかし・広がり・色・inset（内側かどうか）を指定して、CSSのbox-shadowプロパティを組み立てるツールです。
- プレビューを見ながら各値を調整できるため、実際の見た目を確認しながら影のスタイルを作成できます。
- 色の欄には#で始まるHEXだけでなく、rgba()・hsl()・colorキーワードなど任意のCSSカラー値をそのまま使用できます。
使い方
- 横方向・縦方向のオフセット、ぼかし、広がり、色を指定します。
- 内側に影をつけたい場合は「内側（inset）」にチェックを入れます。
- 「CSSを生成する」ボタンをクリックすると、プレビューと生成されたCSSが表示されます。
入力例・出力例
入力
オフセットX: 0 / Y: 4 / ぼかし: 8 / 広がり: 0 / 色: #000000
出力
box-shadow: 0px 4px 8px 0px #000000;
利用シーン
- カードやボタンに使う影のスタイルを、プレビューを見ながら微調整して作成する
- デザインカンプで指定された影の見た目を、box-shadowのCSS値に変換する
- 内側の影（inset）を使ったへこみ表現のCSSを、値を調整しながら作成する
よくある質問
色にrgba()やhsl()のような形式も使えますか？
はい。「#」から始まる場合のみHEX形式として検証し、それ以外（rgba()・hsl()・colorキーワードなど）はそのままCSSの値として使用します。
ぼかしや広がりに負の値は指定できますか？
広がりには負の値を指定できますが、ぼかし（blur-radius）はCSS仕様上0以上である必要があるため、負の値はエラーになります。
複数の影を重ねることはできますか？
このツールは単一のbox-shadow宣言の生成に対応しています。複数の影を重ねたい場合は、生成したCSSをカンマ区切りで手動で組み合わせてください。
注意点
- ぼかし（blur-radius）はCSS仕様上0以上である必要があります。負の値を指定するとエラーになります。広がり（spread-radius）には負の値を指定できます。
- 色の欄は「#」から始まる場合のみHEX形式として検証されます。それ以外の値（rgba()など）はそのままCSSの値として使用されます。
- 複数の影を重ねる場合は、生成されたCSS値をカンマ区切りで手動で組み合わせてください（本ツールは単一のbox-shadow宣言のみ生成します）。