ボックスシャドウCSS生成器
CSSのbox-shadowプロパティを視覚的に生成・プレビューします。
シャドウ設定
スライダーを調整してシャドウ効果をカスタマイズ
シャドウ 1
プリセット
定義済みのシャドウスタイルを試す
プレビュー
生成されたシャドウ効果を確認
Preview
生成されたCSS
box-shadow: 0px 4px 6px 0px #00000040;ボックスシャドウプロパティリファレンス
プロパティの説明
- • X オフセット: シャドウの水平位置（正の値：右、負の値：左）
- • Y オフセット: シャドウの垂直位置（正の値：下、負の値：上）
- • ぼかし: シャドウのぼかし半径（0：鮮明、値が大きいほどぼかし）
- • 拡散: シャドウのサイズ（正の値：拡大、負の値：縮小）
- • 色: シャドウの色（HEX、RGB、RGBAなど）
- • 内側: シャドウが内側のシャドウかどうか