# box-shadow

> 要素に影を付けるプロパティです。X方向のオフセット、Y方向のオフセット、ぼかし半径、広がり、色を指定できます。複数の影を重ねることで立体的なデザインや多彩な効果を実現できます。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/box-shadow/

## 構文

```css
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
```

## Tailwindでは

- `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新設。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 10+ / Firefox 4+ / Safari 5.1+ / Edge 12+

## コード例

### 例1: 影なし（デフォルト）

```css
box-shadow: none;
```

### 例2: 軽い影（ぼかし4px）

```css
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
```

### 例3: 中程度の影（ぼかし12px）

```css
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
```

### 例4: 強い影（ぼかし30px）

```css
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
```

## TIPS

ホバー効果やフォーカス状態の表現によく使われる。

## AIがよく間違えるポイント

AIの生成する影は不自然に濃い・硬いことが多いです。実務では「小さくて濃い影+大きくて薄い影」のカンマ区切り多重指定が自然に見える定番です。またborder代わりの1px影（0 0 0 1px）やinsetの活用も、明示すると質が上がります。

## AIへの依頼文例

- このカードの影を、多重シャドウを使った自然で柔らかい印象に調整して
- ダークモードでも破綻しないbox-shadowの設計（色や透明度）を提案して

## 関連プロパティ

- [filter](https://www.css-dictionary.com/property/filter.md)