ボックスシャドウジェネレーターとは？
CSSボックスシャドウジェネレーターは、HTML要素に視覚的な深度効果を作成するためのツールです。水平・垂直オフセット、ぼかし半径、広がり半径、色を設定し、CSSコードを生成します。
使い方
- Xオフセット・Yオフセット・ぼかし・広がり（px単位）とシャドウの色（例：rgba(0,0,0,0.3)）を入力します。入力に応じてCSSコードが自動更新されます。
- 「生成」ボタンをクリックするとランダムなシャドウプリセットを読み込めます。
- 生成されたCSS box-shadowプロパティをコピーしてスタイルシートで使用します。
基礎知識
CSS box-shadowの構文：box-shadow: [inset] offset-x offset-y blur-radius spread-radius color。正のXは右、正のYは下に移動。ぼかし半径はソフトさ、広がり半径はシャドウの拡大・縮小を制御します。複数のシャドウをカンマ区切りで重ねてリアルな深度を表現できます。insetキーワードは内側シャドウを作成します。
よくある質問
リアルなシャドウを作るには？
控えめなオフセット（2-8px）、適度なぼかし（10-30px）、負のスプレッド、半透明の黒（rgba(0,0,0,0.1-0.3)）を使用し、異なるオフセットで複数シャドウを重ねます。
1つの要素に複数のシャドウを追加できますか？
はい。複数のシャドウ値をカンマで区切ります。リストの最初のシャドウが最前面に表示されます。
box-shadowはレイアウトに影響しますか？
いいえ。ボックスシャドウは純粋にビジュアルで、要素のボックスモデルやレイアウトには影響しません。