CSSボックスシャドウジェネレーター

スライダーを動かすだけで、Webデザイン用の影効果（box-shadow）を直感的に生成できます。複数のレイヤーを重ねた滑らかで高品質な影の作成、内向きシャドウ（inset）の切り替え、背景色とのコントラスト確認にも対応。生成されたスタイルコードは即座にコピーしてコードに貼り付けられます。

シャドウレイヤー管理

複数のシャドウを重ねて、より自然で立体感のある影を表現できます。

シャドウ 1

シャドウ 2

簡単プリセット:

選択レイヤーの調整

現在選択中のシャドウの値をスライダーで調整します。

水平オフセット (X Offset)0px

垂直オフセット (Y Offset)10px

ぼかし半径 (Blur)25px

広がり (Spread)-5px

影の色 (Hex)

不透明度 (Opacity)10%

内向きシャドウ (Inset)

影をボックスの内側に向けて落とします。

プレビューボックスの外観

影を確認するボックスのサイズや角丸、色を変更します。

ボックスの色

角丸 (Radius)16px

サイズ (Size)180px

リアルタイムプレビュー

CSSコード出力

生成されたシャドウのCSSスタイルコードです。

box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10); -webkit-box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10);