CSS Box Shadow生成
CSSのbox-shadowをリアルタイムプレビューで直感的に作成。X/Yオフセット・ぼかし・拡張・色・透明度・insetをスライダーで調整し、複数レイヤーにも対応。コピペで使える無料オンラインツール。
CSSのbox-shadowをスライダーで直感的に作成し、リアルタイムプレビューで確認できるツールです。
// SHADOW LAYERS
#1
// PRESETS
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
// 詳細
スライダーで直感操作
X/Yオフセット、ぼかし（blur）、拡張（spread）、色、透明度（alpha）をスライダーで操作できます。数値の手入力不要で、プレビューを見ながら微調整が可能です。
複数レイヤー対応
最大5つのシャドウレイヤーを重ねることで、奥行きのあるリアルな影やクリエイティブなエフェクトを作成できます。各レイヤーごとに色・サイズ・insetを個別設定可能です。
プリセットで素早くスタート
SOFT（柔らかい影）、HARD（くっきりした影）、NEON（発光エフェクト）、LAYERED（多層影）、INSET（内側の影）、RETRO（レトロエフェクト）の6種類のプリセットを用意しています。
// FAQ
- box-shadowの各パラメータの意味は？
- X: 水平方向のオフセット、Y: 垂直方向のオフセット、Blur: ぼかしの大きさ、Spread: 影の拡張/収縮、Color: 影の色、Alpha: 透明度です。insetを有効にすると要素の内側に影が付きます。
- 複数のシャドウを重ねられますか？
- はい、最大5レイヤーまで追加できます。カンマ区切りで複数のbox-shadowが出力され、そのままCSSに貼り付けて使用できます。
- 生成したCSSはどのブラウザで使えますか？
- box-shadowはモダンブラウザ全てで対応しています（Chrome、Firefox、Safari、Edge）。ベンダープレフィックスは不要です。
- insetとは何ですか？
- insetを指定すると、影が要素の外側ではなく内側に描画されます。ボタンの押し込み効果やテキスト入力欄の凹んだ外観を表現するのに使われます。
- 透明度（Alpha）はどう機能しますか？
- Alpha値で影の透明度を0%（完全透明）〜100%（不透明）の範囲で調整できます。rgba()形式で出力されるので、背景色に応じた自然な影を作れます。
// 使い方
-
シャドウのパラメータを調整
スライダーでX/Yオフセット、ぼかし、拡張、色、透明度を調整します。プレビューがリアルタイムで更新されます。
-
レイヤーを追加（任意）
「+ ADD」ボタンで影レイヤーを追加できます。複数の影を重ねて立体的なエフェクトを作れます。
-
CSSコードをコピー
プレビューを確認したら「COPY」ボタンでCSSコードをクリップボードにコピーし、そのままスタイルシートに貼り付けます。