CSS box-shadowジェネレーター
X/Yオフセット・ぼかし半径・広がり半径・色・内側影（inset）を調整すると、プレビューと生成されるCSSがリアルタイムに更新されます。シャドウレイヤーは1〜6個まで追加・削除でき、「シャドウを追加」ボタンを押すたびにオフセットとぼかしが段階的に広がるレイヤーが挿入されるため、影を重ねた立体的な表現も作れます。生成されたbox-shadow宣言はコピーボタンでそのままクリップボードにコピーできます。角丸との組み合わせには CSS border-radiusジェネレーター もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
シャドウレイヤー
シャドウレイヤーは1〜6個まで設定できます。
プレビュー
注意事項
- 色の入力は`<input type="color">`の仕様上、6桁の16進数カラーコードのみ指定できます（アルファチャンネル非対応）。半透明の影（`rgba()`/`hsla()`）にしたい場合は、生成されたCSSの色部分を直接書き換えてご利用ください。
- 広がり半径（spread-radius）にマイナスの値を指定すると、影がぼかし半径よりも縮小します。
- 内側影（inset）を有効にすると、要素の外側ではなく内側に影が描画されます。
- 複数のシャドウレイヤーを追加した場合、CSSの仕様上、先に指定したレイヤーほど手前（上）に重なって表示されます。
用語解説
box-shadow
要素に影を付けるCSSプロパティ。`box-shadow: X Y ぼかし 広がり 色;`の形式で指定し、カンマ区切りで複数の影を重ねることもできる。
オフセット（offset）
影をずらす距離。X方向は正の値で右、負の値で左にずれ、Y方向は正の値で下、負の値で上にずれる。
ぼかし半径（blur-radius）
影の輪郭をぼかす度合い。値が大きいほど影の境界がなめらかに広がる。0を指定すると輪郭がくっきりした影になる。
広がり半径（spread-radius）
影のサイズを拡大・縮小する値。正の値で影が要素より一回り大きくなり、負の値で影が要素より小さくなる。
内側影（inset）
`inset`キーワードを指定すると、影が要素の外側ではなく内側に描画され、くぼんだような表現になる。
よくある質問
insetを付けるとどうなりますか？
insetを付けると影が要素の外側ではなく内側に描画され、へこんだような見た目になります。入力欄の内側の影や押し込まれたボタン表現に使われます。
複数の影を重ねることはできますか？
はい。シャドウレイヤーを最大6個まで追加できます。薄い影を重ねると、1つの濃い影よりも自然で立体的な見た目になります。
ぼかし半径と広がり半径の違いは何ですか？
ぼかし半径は影の輪郭をどれだけぼかすかを指定します。広がり半径は影そのものの大きさを拡大・縮小し、負の値にすると影が小さくなります。
このページをシェア