# filter

> 要素に視覚効果（ぼかし、明度調整、色相変更など）を適用するプロパティです。blur()、brightness()、contrast()、grayscale()など多数の関数があり、画像加工やデザイン効果を実現します。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/filter/

## 構文

```css
filter: <filter-function>
```

## Tailwindでは

- `blur-sm` → filter: blur(8px)
- `grayscale` → filter: grayscale(100%)
- `brightness-75` → filter: brightness(0.75)
- 一般形: `{filter}-{amount}（併記で複数フィルタを合成）`
- 任意値: `blur-[2px]`
- 補足: v4でスケール名が変更: v3のblur→blur-sm、blur-sm→blur-xsに改名。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 53+ / Firefox 35+ / Safari 9.1+ / Edge 12+

## コード例

### 例1: 5pxのぼかし効果

```css
filter: blur(5px);
```

### 例2: 明度と彩度を上げる

```css
filter: brightness(1.2) contrast(1.1);
```

### 例3: ホバー時にグレースケール→セピア→色相変更

```css
.image:hover {
  filter: grayscale(100%) sepia(100%) hue-rotate(200deg);
}
```

## TIPS

複数のフィルターを組み合わせ可能。アニメーションとの相性も良い。

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

影の付与でAIはbox-shadowを選びがちですが、切り抜き画像（透過PNG/SVG）にはfilter: drop-shadow()が正解です（形状に沿った影になる）。またfilterを指定した要素は新しいスタッキングコンテキストを作り、子孫のposition: fixedがビューポートでなくその要素基準になる、という重大な副作用をAIはほぼ言及しません。

## AIへの依頼文例

- 透過PNGのキャラクター画像に形状に沿った影を付けて。box-shadowとdrop-shadowの違いも説明して
- filterを付けたらモーダル（position: fixed）の位置が壊れた。スタッキングコンテキストの観点で原因を特定して

## 関連プロパティ

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