CSS 多層ボックス シャドウ生成

機能

• 水平 / 垂直オフセット、ぼかし半径、広がり半径を調整
• 影の色はカラーピッカーで、不透明度は別のスライダー
• 外側・内側・内外両方の 3 種類
• 2〜5 層の重ね合わせ。上の層ほど大きく薄くなります
• 5 つのプリセット：カード・ホバー・押下・内凹・ロング シャドウ
• 何を変えてもプレビューが即座に再描画。「生成」ボタンはありません
• 下にコピーできる box-shadow と角丸の宣言
• コードはシンタックス ハイライト付きで、コピーはボタン一つ
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まず種類を選びます：外側・内側・内外両方
2. オフセット・ぼかし・広がりを動かし、ピッカーで色と不透明度を調整します
3. なめらかにしたいときはレイヤー数を増やし、段ごとの倍率を調整します
4. プリセットから始めて微調整し、最後に CSS をコピーします

よくある質問

広がり半径を負にしても内側の影にならないのはなぜですか？

内側の影は別のキーワードである `inset` によるものだからです。負の広がり半径は影を内側へ縮めるだけで（見えなくなるまで縮むこともあります）、それでも影はボックスの外側に描かれます。`inset` を書いたときだけ、内容領域の内側に逆向きの影が描かれます。一見似て見えることがあるため、本ツールは内側を独立した種類として用意しています。

重ねた影はどれが上ですか？

先に書いたものが上で、`z-index` の「数値が大きいほうが上」とは逆です。`box-shadow: a, b` では `a` が `b` を覆います。そこで「締まった影 + 柔らかい光」を作るときは、通常は締まったほうを先に、柔らかいほうを後に（しばしば薄く）書きます。本ツールは基準の層を先に、大きく薄い層を後に出力します。

ロング シャドウのプリセットでぼかしが 0 なのはなぜですか？

ロング シャドウは硬い輪郭で、ぼかさない影を多数ずらして重ね、斜めの帯を作るものです。少しでもぼかすと崩れます。プリセットではぼかしを 0 にしてあります。オフセットの向きとレイヤー数を変えると、長さや角度を変えられます。

影はレイアウトに影響しますか？

いいえ。`box-shadow` は描画されるだけで、レイアウトの領域を取らず、ボックスを大きくせず、スクロールバーも出しません —— `border` とは違います。ただし隣接する内容の上に描画されるため、非常に大きい影は隣の要素に重なることがあります。広がりを減らすか、隣の要素の重なり順を上げてください。