要素に影を付けるプロパティです。X方向のオフセット、Y方向のオフセット、ぼかし半径、広がり、色を指定できます。複数の影を重ねることで立体的なデザインや多彩な効果を実現できます。
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>| shadow-sm | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), ... |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), ... |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), ... |
| inset-shadow-sm | box-shadow: inset ... |
任意値: shadow-[0_4px_12px_rgb(0_0_0_/_0.25)]
v4でスケール名が変更: v3のshadow→shadow-sm、shadow-sm→shadow-xsに改名。インセット影のinset-shadow-*はv4新設。
.element {
box-shadow: 0px 4px 6px 0px #000000;
}box-shadow: none;影なし（デフォルト）
box-shadow: 0 2px 4px rgba(0,0,0,0.1);軽い影（ぼかし4px）
box-shadow: 0 4px 12px rgba(0,0,0,0.15);中程度の影（ぼかし12px）
box-shadow: 0 10px 30px rgba(0,0,0,0.3);強い影（ぼかし30px）
ホバー効果やフォーカス状態の表現によく使われる。
AIの生成する影は不自然に濃い・硬いことが多いです。実務では「小さくて濃い影+大きくて薄い影」のカンマ区切り多重指定が自然に見える定番です。またborder代わりの1px影（0 0 0 1px）やinsetの活用も、明示すると質が上がります。
このカードの影を、多重シャドウを使った自然で柔らかい印象に調整して
ダークモードでも破綻しないbox-shadowの設計（色や透明度）を提案して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。