要素に視覚効果（ぼかし、明度調整、色相変更など）を適用するプロパティです。blur()、brightness()、contrast()、grayscale()など多数の関数があり、画像加工やデザイン効果を実現します。
filter: <filter-function>| 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に改名。
filter: blur(5px);5pxのぼかし効果
filter: brightness(1.2) contrast(1.1);明度と彩度を上げる
.image:hover {
filter: grayscale(100%) sepia(100%) hue-rotate(200deg);
}ホバー時にグレースケール→セピア→色相変更
複数のフィルターを組み合わせ可能。アニメーションとの相性も良い。
影の付与でAIはbox-shadowを選びがちですが、切り抜き画像（透過PNG/SVG）にはfilter: drop-shadow()が正解です（形状に沿った影になる）。またfilterを指定した要素は新しいスタッキングコンテキストを作り、子孫のposition: fixedがビューポートでなくその要素基準になる、という重大な副作用をAIはほぼ言及しません。
透過PNGのキャラクター画像に形状に沿った影を付けて。box-shadowとdrop-shadowの違いも説明して
filterを付けたらモーダル（position: fixed）の位置が壊れた。スタッキングコンテキストの観点で原因を特定して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。