CSSフィルター効果まとめ：blurやbrightnessで魅せる演出

2025.11.11

CSSフィルター効果まとめ：blurやbrightnessで魅せる演出

CSSフィルター効果まとめ：blurやbrightnessで魅せる演出

CSSのfilterプロパティは、画像や要素に対して視覚効果（ぼかし・明度・彩度・色相変化など）を簡単に適用できる強力なツールです。デザインのアクセント、 hover エフェクト、フォーカス誘導、フロントの視覚的階層づけなど、実務でもよく使われます。

この記事の内容

  • filter の基本（主要関数の一覧と説明）
  • 実用サンプル（hover、遷移、組み合わせ）
  • backdrop-filter（背景のぼかし）との違い
  • SVGフィルターの使いどころ
  • パフォーマンスとアクセシビリティの注意点

filter プロパティの基本

filter は CSS で以下のように使います：

CSS
/* 例 */
img.sample {
  filter: blur(4px) brightness(0.9);
}
sample

主な関数：

  • blur(px)：ぼかし（ガウスぼかし）。例：blur(4px)
  • brightness(%)：明度（0 = 黒、1 = 元画像、>1で明るく）。例：brightness(1.2)
  • contrast(%)：コントラスト（contrast(150%) 等）
  • grayscale(%)：グレースケール化（例：grayscale(100%)）
  • sepia(%)：セピア調（例：sepia(60%)）
  • saturate(%)：彩度（例：saturate(1.5)）
  • hue-rotate(deg)：色相回転（例：hue-rotate(90deg)）
  • invert(%)：反転（例：invert(100%)）
  • opacity(%)：透過（filter でも可、ただし通常は opacity を使う）
  • drop-shadow(offsetX offsetY blur color)：画像向けの影（box-shadow と違い、画像の透明部分を考慮）
  • url()：SVG フィルターを参照（高度な効果）

基本的な実践例（hoverで変化）

画像やカードに hover で効果を付けるのは定番です。以下はよく使うサンプルです。

HTML
<!-- HTML -->
<figure class="card">
  <img src="sample.jpg" alt="サンプル" class="card__img">
  <figcaption class="card__caption">サンプルキャプション</figcaption>
</figure>
CSS
/* CSS */
.card {
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}
.card__img {
  display: block;
  width: 320px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* hover で拡大＋彩度UP */
.card:hover .card__img {
  transform: scale(1.05);
  filter: saturate(1.4) brightness(1.05);
}

/* キャプションにぼかし背景を付けたいとき */
.card__caption {
  position: relative;
  padding: 8px 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  margin-top: -36px;
  backdrop-filter: blur(6px); /* 背景をぼかす（対応ブラウザで有効） */
}
sample
サンプルキャプション

効果的な組み合わせ例

  • フォーカス誘導：非フォーカス要素をgrayscale(100%) blur(2px)にして、注目要素は彩度を戻す。
  • 状態の強調：hoverでbrightness(1.2) drop-shadow(...)を併用して浮かせる見せ方。
  • エモーショナル表現：sepia()やhue-rotate()で写真の空気感を変える。

backdrop-filter と filter の違い

  • filter：要素自体（画像やボックス）の中身を加工する
  • backdrop-filter：要素の背後（背景）の表示を加工する（Frosted glass／透過背景によるぼかし等）

ポイント： backdrop-filter を使うとガラス越しのような表現ができますが、対応ブラウザが限定的なのでフォールバックを用意してください。

CSSだけで表現する「フォーカス切替」デモ

HTML
<div class="gallery">
  <img src="img1.jpg" alt="1" class="gallery__img">
  <img src="img2.jpg" alt="2" class="gallery__img">
  <img src="img3.jpg" alt="3" class="gallery__img">
</div>
CSS
.gallery__img {
  width: 180px;
  transition: filter 0.3s ease, transform 0.3s ease;
  filter: grayscale(100%) brightness(0.8) contrast(0.9);
  transform: scale(1);
  margin-right: 8px;
}
.gallery__img:hover {
  filter: none;
  transform: scale(1.03);
}
1 2 3

SVGフィルター（高度な表現）

より複雑なエフェクト（カスタムブラー、カラー操作、ノイズなど）は SVG フィルターで実現できます。例：

HTML
<svg width="0" height="0" style="position:absolute">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/>
    <feColorMatrix type="saturate" values="0"/>
    <feBlend mode="multiply"/>
  </filter>
</svg>

<div class="img-with-grain" style="filter: url(#grain)">...</div>

SVGフィルターは非常に強力ですが、ブラウザ差とパフォーマンスに注意してください。

パフォーマンスの注意点

  • GPUオフロードされるプロパティ（transform / opacity）が最も軽い。filter は場合によっては GPU 処理になるが、重い blur 大量適用は負荷が高い。
  • 大量の要素に filter を同時に適用すると、スクロールやアニメーションがカクつく恐れあり。
  • モバイルでは特に負荷が出やすいので、prefers-reduced-motion / パフォーマンス向けのフォールバックを検討する。

アクセシビリティとフォールバック

  • 重要情報の判別が filter によって損なわれないよう注意。視覚に頼りすぎない設計を。
  • prefers-reduced-motion を使ってアニメーションや動的効果を抑える配慮を行う。
  • 古いブラウザ向けには filter を使わないスタイルを提供するか、徐々にエンハンスする形（progressive enhancement）が望ましい。

実用例：Frosted Glass（backdrop-filter）

CSS
.frosted {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); /* Safari 用 */
  border: 1px solid rgba(255,255,255,0.12);
  padding: 16px;
  border-radius: 10px;
}
sample

※ Safari ではプレフィックス（-webkit-backdrop-filter）が必要な場合があります。

デザイン実践Tips（すぐ使える小技）

  • 背景画像に対して filter: brightness(0.6) を適用し、上に乗せるテキストの可読性を高める。
  • 重要でない要素に grayscale(100%) を適用して、ユーザーの視線を誘導する。
  • hover で filter を緩やかに切り替える際は transition: filter 0.3s ease を付ける。
  • サムネイルで微妙な drop-shadow を入れると写真が浮いて見える効果がある。

サンプルコード集（コピペで試せる）

HTML
<!-- サンプル：hoverで明るくする -->
<img src="sample.jpg" alt="sample" class="filter-sample">

<style>
.filter-sample {
  width: 320px;
  height: 200px;
  object-fit:cover;
  transition: filter 0.3s ease;
  filter: brightness(0.8) grayscale(20%) saturate(1);
}
.filter-sample:hover {
  filter: brightness(1) grayscale(0) saturate(1.1);
}
</style>
sample

まとめ

  • filter はデザインに手軽な表現力を追加する強力な手段
  • backdrop-filter は「ガラス越し」表現に便利だがブラウザ対応に注意
  • パフォーマンスとアクセシビリティを意識して使う（特に blur や大規模適用は要注意）

ひと言：「フィルターは“雰囲気”を変える魔法。使いすぎず要所で効かせるのがポイント！」

関連記事

PAGE TOP