SPONSORED ADVERTISEMENT
Placeholder (banner)

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

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

シャドウレイヤー管理
複数のシャドウを重ねて、より自然で立体感のある影を表現できます。
シャドウ 1
シャドウ 2
簡単プリセット:
選択レイヤーの調整
現在選択中のシャドウの値をスライダーで調整します。
0px
10px
25px
-5px
10%

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

プレビューボックスの外観
影を確認するボックスのサイズや角丸、色を変更します。
16px
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);