filter

アニメーション・エフェクト

要素に視覚効果（ぼかし、明度調整、色相変更など）を適用するプロパティです。

構文

Syntax
filter: <filter-function>

コード例

例 1

filter: blur(5px);
実行結果
5pxぼかし効果

5pxのぼかし効果

例 2

filter: brightness(1.2) contrast(1.1);
実行結果
明度・コントラスト調整

明度と彩度を上げる

例 3

.image:hover { filter: grayscale(100%) sepia(100%) hue-rotate(200deg); }
実行結果
ホバーでフィルター変化

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

💡 TIPS

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

関連プロパティ

ブラウザサポート

Chrome 53+, Firefox 35+, Safari 9.1+