Widely available 安心して使用可能。すべての主要ブラウザで広くサポートされている。

CSS filter (blur, brightness, contrast, etc.)

filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

いくつかの関数、例えば blur() や contrast() などが利用でき、あらかじめ定義された効果を実現するのに役立てることができます。

エフェクト画像

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
filter
53
12
35
9.1
53
9.3
blur
18
12
35
6
53
6
brightness
18
12
35
6
53
6
contrast
18
12
35
6
53
6
drop-shadow
18
12
35
6
53
6
grayscale
18
12
35
6
53
6
hue-rotate
18
12
35
6
53
6
invert
18
12
35
6
53
6
opacity
18
12
35
6
53
6
saturate
18
12
35
6
53
6
sepia
18
12
35
6
53
6
CSS タイプ
filter-function

は CSS のデータ型で、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは filter および backdrop-filter プロパティで使用します。
18
12
35
6
53
6
blur

blur() は CSS の関数で、入力画像にガウスぼかしを適用します。返値は filter-function です。
18
12
35
6
53
6
brightness

brightness() は CSS のフィルター関数 (filter-function) で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。
18
12
35
6
53
6
contrast

contrast() は CSS の関数で、入力画像のコントラストを調整します。結果は filter-function です。
18
12
35
6
53
6
drop-shadow

drop-shadow() は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は filter-function です。
18
12
35
6
53
6
grayscale

grayscale() は CSS の関数で、入力画像をグレースケールに変換します。結果は filter-function です。
18
12
35
6
53
6
hue-rotate

hue-rotate() は CSS の関数で、要素およびその中身のコンテンツの色相環を回転させます。結果は filter-function です。
18
12
35
6
53
6
invert

invert() は CSS の関数で、入力画像の色サンプルを反転します。結果は filter-function です。
18
12
35
6
53
6
opacity

opacity() は CSS の関数で、入力画像のサンプルに透過性を適用します。結果は filter-function です。
18
12
35
6
53
6
saturate

saturate() は CSS の関数で、入力画像の彩度を上げたり下げたりします。結果は filter-function です。
18
12
35
6
53
6
sepia

sepia() は CSS の関数で、入力画像をセピア色に、より暖かい、より黄色/茶色がかったの表現に変換します。結果は filter-function です。
18
12
35
6
53
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
注釈 1件
実装メモ
  • Chrome 18 から 19 では、`saturate()` 関数は 10 進数やパーセンテージの値ではなく整数のみを受け取ります。 Chrome 20 以降、このバグは修正されています。

基本構文

CSS 
.blurred {
  filter: blur(4px);
}

.grayscale-hover img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.grayscale-hover img:hover {
  filter: grayscale(0%);
}

.multi-filter {
  filter: contrast(1.2) brightness(1.1) saturate(1.3);
}

ライブデモ

blur（ぼかし）

CSS filter (blur, brightness, contrast, etc.) の blur（ぼかし） パターンです。

プレビュー全画面表示

grayscale（ホバーで解除）

CSS filter (blur, brightness, contrast, etc.) の grayscale（ホバーで解除） パターンです。

プレビュー全画面表示

複合フィルター

CSS filter (blur, brightness, contrast, etc.) の 複合フィルター パターンです。

プレビュー全画面表示

実務での使いどころ

  • 画像エフェクト

    画像にグレースケールやセピアなどのフィルターを適用し、ホバーで解除するインタラクション。

  • 背景のぼかし

    モーダル表示時に背景コンテンツをblurフィルターでぼかし、フォーカスを誘導する。

注意点

  • filter はレンダリングコストが高い場合がある。大量の要素に適用する際はパフォーマンスに注意。
  • filter を使用すると新しいスタッキングコンテキストが生成される。

アクセシビリティ

  • blur フィルターでコンテンツを隠す場合でも、スクリーンリーダーには読み上げられることに留意する。

参考リンク