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

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

filter プロパティにより、要素やその内容に対してぼかし・明度・コントラスト・彩度・色相回転などの画像処理を適用できる。複数のフィルター関数をスペース区切りで連結可能で、CSSだけでPhotoshop的な加工が行える。画像だけでなくテキストやSVGにも適用可能。

エフェクト画像

概要

filter プロパティにより、要素やその内容に対してぼかし・明度・コントラスト・彩度・色相回転などの画像処理を適用できる。複数のフィルター関数をスペース区切りで連結可能で、CSSだけでPhotoshop的な加工が行える。画像だけでなくテキストやSVGにも適用可能。

対応ブラウザ

デスクトップ

Chrome 53+
Edge 12+
Safari 9.1+
Firefox 35+

モバイル

Chrome Android 53+
Safari iOS 9.3+
Firefox Android 35+

基本構文

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フィルターでぼかし、フォーカスを誘導する。

注意点

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

アクセシビリティ

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

参考リンク