🫧 Box Shadow生成
CSSの box-shadow をスライダーで視覚的に作成します。X・Yオフセット、ぼかし、広がり、色、不透明度、内側（inset）を調整し、最大5層の多層シャドウを合成できます。すべての処理はブラウザ内で完結します。
📘 使い方
- 「影レイヤー」でレイヤーを選択します。「＋ レイヤーを追加」で最大5層まで重ねられます。各レイヤーのチップの「×」で削除できます。
- 選択中のレイヤーについて、X・Yオフセット、ぼかし、広がり、不透明度をスライダーで調整し、色や内側（inset）を設定します。
- プレビュー右上の「明るい／暗い」で背景を切り替え、影の見え方を確認できます。
- 下の「生成されたCSS」に多層シャドウが合成表示されます。「CSSをコピー」で貼り付けられます。
❓ よくある質問
多層シャドウ（複数の影）とは何ですか？
box-shadow はカンマ区切りで複数の影を重ねられます。近くの濃い影と遠くの淡い影を組み合わせると、より自然で立体的な影を表現できます。本ツールでは最大5層まで合成できます。
inset（内側）はどんなときに使いますか？
inset を指定すると、影が要素の外側ではなく内側に描画されます。凹んだボタンや入力欄のくぼみ、押し込まれたような表現に使われます。
色と不透明度はどう扱われますか？
カラーピッカーで選んだ色と不透明度スライダーの値を合成し、rgba() 形式で出力します。影は不透明度を下げた半透明にすると、背景となじんで自然に見えます。
設定内容はサーバーに送信されますか？
いいえ。影の合成とCSS生成はすべてお使いのブラウザ内（クライアントサイド）で行われ、設定内容がサーバーへ送信・保存されることはありません。