[CSS] filterプロパティの使い方まとめ（画像をぼかす・明るくする・白黒など）

CSSの filter プロパティを使うと、画像にさまざまな視覚効果を簡単に追加できます。
この記事では代表的なフィルター効果とその使い方をご紹介します。

透明度（opacity）

opacity() を使うと画像の透明度を調整できます。
1 が元の状態で、0 は完全に透明です。
% 単位での指定も可能です（例：opacity(70%) = opacity(0.7)）。

ぼかし（blur）

blur() を使うと画像にぼかしを加えられます。
ぼかしの大きさは px や em などの長さの単位で指定し、% 単位は使えません。

明るさ（brightness）

brightness() を使うと画像の明るさを調整できます。
1 が元の状態で、1 より大きい値で明るく、1 より小さい値で暗くなります。
「%」単位での指定もできます。（1 = 100%）

画像を暗くする

画像を明るくする

コントラスト（contrast）

contrast() を使うと画像のコントラスト（明暗の差）を調整できます。
1 が元の状態で、1 より大きいと高コントラスト、1 より小さいと低コントラストになります。
「%」単位での指定もできます。（1 = 100%）

コントラストを弱くする

コントラストを強くする

彩度（saturate）

saturate() を使うと色の鮮やかさ（彩度）を調整できます。
1 が元の状態で、1 より大きいと鮮やかに、1 より小さいと色あせた印象になります。
「%」単位での指定もできます。（1 = 100%）

彩度を低くする

彩度を高くする

グレースケール（grayscale）

grayscale() を使うと画像を白黒に変換できます。
0 が元の状態で、1 が完全なグレースケールになります。
「%」単位での指定もできます。（1 = 100%）

セピア（sepia）

sepia() を使うと画像にセピア調のエフェクトをかけられます。
0 が元の状態で、1 で完全なセピアになります。
「%」単位での指定もできます。（1 = 100%）

その他の filter 関数

今回の記事ではよく使うものに絞って紹介しましたが、他にも以下のような関数があります。

・hue-rotate()：色相を回転させて色味を変える
・invert()：階調を反転させてネガ風にする

filter プロパティ 早見表

フィルター	範囲・単位指定	備考
opacity()	0 ～ 1（または 0% ～ 100%）	0 で完全に透明、1 が元の状態
brightness()	0 ～ ∞（または %）	1（100%）が元の明るさ
contrast()	0 ～ ∞（または %）	1（100%）が元のコントラスト
saturate()	0 ～ ∞（または %）	1（100%）が元の彩度
grayscale()	0 ～ 1（または 0% ～ 100%）	1で完全に白黒
sepia()	0 ～ 1（または 0% ～ 100%）	1で完全にセピア調
blur()	px / em	%指定不可、値が大きいほどぼかしが強くなる

デモ

マウスオーバーで、filter プロパティを適用した状態の表示を確認できます。

See the Pen
[CSS] filterプロパティ by mkl may (@mkl-may)
on CodePen.