ボックスシャドウ生成
CSSのbox-shadow値をプレビューしながら生成します。
検索意図
カード・ボタン・モーダルでそのまま使えるCSS box-shadow
offset-x、offset-y、blur、spread、color、inset を組み合わせて、コンポーネントの奥行きと境界を調整します。
box-shadowは位置(offset)、ぼかし(blur)、拡散(spread)、色(color)、内側影(inset)を調整して、UIの陰影の深さとレイヤー分けをすばやく合わせることができます。
このツールは、実際のカード・ボタン・モーダルへ適用する前に、ダーク/ライト背景で影のコントラストと可読性を確認するためのCSS影値生成サポートです。
適した使用シナリオ
カードのホバー、ボタンの強調、モーダルオーバーレイ、トースト通知などで、コンポーネントの視覚的な階層を作る場合。
パラメータ設計ガイド
x/yオフセットは方向を、blurは柔らかさ、spreadは広がり量、colorはトーン、insetは内側感を表します。
適用前チェックポイント
実ページの背景色／ブランドトーン、ダークモード、ボタン文字とのコントラスト、デザインシステムのトークン（角丸・余白・影のトーン）の整合を確認してください。
生成結果は早期確認とコピー用に寄せたものです。最終反映前に実UIで背景・モード・デザイントークン別の見え方を再確認してください。
ボックスシャドウ生成 ボックスシャドウ生成ワークスペース
生成されたbox-shadow CSS
使い方
- 1 シャドウ項目を追加し、X/Y位置、ぼかし、広がりを調整します。
- 2 色やinsetの有無を変えながら、プレビューで奥行きを確認します。
- 3 生成されたbox-shadow CSSをコピーしてスタイルシートに貼り付けます。
主な使用例
- カード用box-shadow CSSの作成
- 複数シャドウレイヤーの調整
- 内側シャドウ値のコピー
よくある質問
どのシャドウ値を調整できますか？
X/Yオフセット、ぼかし、広がり、色、透明度、insetの有無を調整し、複数のシャドウレイヤーを追加または削除できます。
生成されたbox-shadow CSSはそのまま使えますか？
はい。プレビューの下に完成したbox-shadow CSSが表示され、コピー ボタンでクリップボードにコピーできます。
値を変更するとプレビューも更新されますか？
スライダーや色の値を調整すると、プレビューボックスとCSS出力がすぐに更新されます。