CSS Box Shadow Generator
GUI操作でシャドウを設定。CSS・Tailwind v4形式でそのままコピーできます。
シャドウ層
シャドウ設定
box-shadow プロパティ
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
よく使うシャドウ
ソフト
カード・リスト
box-shadow: 0 2px 8px rgba(0,0,0,0.08);ミディアム
パネル・ダイアログ
box-shadow: 0 4px 16px rgba(0,0,0,0.12);ストロング
モーダル・ドロワー
box-shadow: 0 8px 32px rgba(0,0,0,0.20);フロート
FAB・ポップオーバー
box-shadow: 0 16px 48px rgba(0,0,0,0.18);ボトムのみ
ヘッダー・ナビ
box-shadow: 0 8px 16px -4px rgba(0,0,0,0.15);インセット
入力・テキストエリア
box-shadow: inset 0 2px 8px rgba(0,0,0,0.10);カラー
ブランドカラー強調
box-shadow: 0 4px 20px rgba(99,102,241,0.40);ニューモーフィズム
立体的なUI
box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff;