ボックスシャドウの基本構造と各パラメータの役割
CSSの box-shadow プロパティは、ウェブ要素の周囲に影を配置し、平坦な画面に奥行きを与えるための仕組みです。この効果を制御するために、本ツールでは以下のパラメータを個別に調整できます。
- 水平方向の位置: 影を左右に移動させるオフセット値です。-50px から 50px の範囲で指定し、マイナス値は左方向、プラス値は右方向に影を移動させます。
- 垂直方向の位置: 影を上下に移動させるオフセット値です。-50px から 50px の範囲で指定し、マイナス値は上方向、プラス値は下方向に影を移動させます。
- ぼかし（Blur）: 影の輪郭を柔らかくする度合いを 0px から 100px の範囲で調整します。値が大きくなるほど影の境界線が曖昧になり、周囲に溶け込むような効果が得られます。
- 広がり（Spread）: ぼかし処理を適用する前に、影自体のサイズを拡大または縮小します。範囲は -50px から 50px で、マイナスの値を設定すると影が内側に引き締まり、要素の背後に隠れるようなタイトな影を作ることができます。
- 影の色 と 不透明度: カラーピッカーで影の色彩を選択し、不透明度スライダーで透明度を調整します。
これらのスライダーを操作すると、生成されるCSSコードにリアルタイムで数値が反映されます。
内側の影（Inset）による凹凸表現の切り替え
通常のボックスシャドウは要素の外側に投影され、要素が背景から浮き上がっているような視覚効果を与えます。これに対して、「内側の影（Inset）」オプションを有効にすると、影の方向が要素の内側へと反転します。
この設定を切り替えることで、以下のような異なるデザイン表現を使い分けることができます。
| シャドウの種類 | 視覚効果 | 主な用途 |
|---|---|---|
| 通常の影（外側） | 要素が手前に浮き上がって見える | カードデザイン、ポップアップ、ボタンの通常状態 |
| 内側の影（Inset） | 要素が奥に凹んでいるように見える | 窪んだ入力フィールド、押し込まれた状態のボタン |
複数レイヤーの積層によるリアルな奥行きの表現
現実世界における影は、単一の単純なグラデーションではなく、光源の分散や環境光の反射によって複雑な階層を持っています。ウェブデザインにおいてこのリアルな深みを再現するために、本ツールでは複数のシャドウレイヤーを重ねて配置することができます。
ツール上にはあらかじめ5つのレイヤーがプリセットされており、最初のレイヤーにはデフォルト値として 0 8 24 -4（不透明度18%の黒）が設定されています。その他のレイヤーは初期状態では非表示になっていますが、「レイヤーを追加」ボタンを押すことで新しいレイヤーを有効化し、それぞれ異なるオフセット、ぼかし、広がり、色を設定できます。
複数のレイヤーを使用する場合、出力されるCSSコード内では各レイヤーのパラメータがカンマ（,）で区切られた一連のリストとして結合されます。不要になったレイヤーは「レイヤーを削除」ボタンでいつでも取り除くことが可能です。
ブラウザ内処理とプライバシーについて
本ツールで設定したパラメータの計算およびプレビューのレンダリング処理は、すべてお使いのブラウザ上で行われます。入力した数値や選択した色、作成したレイヤーの構成データが外部のサーバー（BroBroGo）にアップロードされることはありません。
よくある質問
水平方向の位置、垂直方向の位置、ぼかし（Blur）、広がり（Spread）はそれぞれ何を制御しているのですか？
位置（オフセット）は影を左右および上下に移動させ、ぼかし（blur）は影の輪郭を柔らかくし、広がり（spread）はぼかす前に影のサイズを拡大または縮小します。マイナスの広がりを設定すると影が内側に引き締まり、要素に密着したシャープな影を作るのに役立ちます。
内側（inset）オプションは何に使うのですか？
通常の影は、浮き上がったカードの背後にある光のように、要素の外側に落ちます。内側（inset）オプションを有効にすると、影が要素の内側に反転し、要素が凹んでいるように見えます。窪んだ入力フィールドや、押し込まれたボタンを表現するのに便利です。
なぜ複数のシャドウレイヤーを重ねるのですか？
単一の影だけでは、ある程度の大きさになると平坦に見えてしまいます。現実的な立体感を表現するには、通常、境界のはっきりした暗い影と、柔らかく広がった影を組み合わせます。2つ目のレイヤーを追加し、それぞれを個別に調整することで、深みのある効果を得られます。