当て推量なしで、本物の奥行きを持つ影
手作業で影を調整すると、ページを10回も再読み込みすることになります。ここではスライダーを動かすとプレビューがその場で反応します。複数レイヤーを重ねて自然な奥行きを出し、正確なCSSをコピーできます。
-
レイヤーを調整
X/Yのずれ、ぼかし、広がり、色、不透明度。
-
レイヤーを追加
鋭い影と拡散した影を混ぜて自然な見た目に。
-
CSSをコピー
完成した box-shadow プロパティをそのまま貼り付け。
構文を理解する
| 値 | 役割 |
|---|---|
| offset-x | 水平方向のずれ（正なら右） |
| offset-y | 垂直方向のずれ（正なら下） |
| blur | ぼかし半径（大きいほど柔らかい） |
| spread | 影を拡大（+）または縮小（−） |
| color | 色、不透明度のため rgba() が多い |
| inset | 影をボックスの内側に配置 |
すべてブラウザ内で生成されます。デフォルト例：box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
よくある質問
box-shadow の各値の意味は？
順に：水平方向のずれ、垂直方向のずれ、ぼかし半径、広がり半径、そして色です。例：「0 10px 25px -5px rgba(124, 58, 237, 0.35)」は影を10px下にずらし、25pxでぼかし、5px縮めます。
広がり半径 (spread) は何のため？
ぼかしの前に影を拡大（正の値）または縮小（負の値）します。負の広がりは、ページの少し上に浮くカードのような、柔らかく引き締まった影に最適です。
複数の影を重ねるには？
各レイヤーをカンマで区切ります。最初に書いたものが上に描かれます。引き締まった鋭い影と、広く拡散した影を組み合わせると、単一の影よりずっと自然に見えます。
box-shadow と drop-shadow の違いは？
box-shadow はボックスの矩形（と border-radius）に沿います。filter: drop-shadow() は透明部分を含む実際の形状に沿うため、切り抜きPNGやSVGに最適です。カードやボタンには box-shadow が適切です。