CSSのfilterプロパティで画像を加工する方法

filterとは？CSSだけで画像を加工できる

「画像をCSSだけでぼかしたい」「グレースケールやセピアをPhotoshopなしでやりたい」——画像編集ソフトを使わなくても、CSSのfilter（フィルター）プロパティで視覚効果を適用できます。

この記事では、filterの主要な関数を実例付きで解説し、backdrop-filterとの違いやパフォーマンスの注意点まで紹介します。

基本構文とフィルター一覧

/* 基本構文 */
filter: 関数名(値);

/* 複数のフィルターを組み合わせる（スペース区切り） */
filter: brightness(1.2) contrast(1.1) saturate(1.3);

主要フィルター一覧

filterとbackdrop-filterの違い

/* filter: 要素自体にフィルターをかける */
img {
  filter: blur(4px); /* 画像自体がぼける */
}

/* backdrop-filter: 要素の背後にフィルターをかける */
.header {
  backdrop-filter: blur(10px); /* 背景がぼける（すりガラス効果） */
  background-color: rgba(255, 255, 255, 0.7);
}

filter は要素自体に効果をかけ、backdrop-filter は要素の後ろにあるコンテンツに効果をかけます。

実践コード例①：画像ホバーでカラー→グレースケール切り替え

.gallery img {
  transition: filter 0.3s ease;
}

/* 通常はグレースケール、ホバーでカラーに */
.gallery img {
  filter: grayscale(100%);
}

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

/* 逆パターン: 通常カラー、ホバーでグレースケール */
.gallery--reverse img {
  filter: grayscale(0%);
}

.gallery--reverse img:hover {
  filter: grayscale(100%) brightness(0.8);
}

transitionと組み合わせると滑らかに変化します。hoverの詳しい使い方はCSSのhoverで動きをつける方法を参照してください。

実践コード例②：backdrop-filterですりガラス風ヘッダー

.glass-header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 16px 24px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 100;
}

/* ダークモード版 */
@media (prefers-color-scheme: dark) {
  .glass-header {
    background-color: rgba(17, 24, 39, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}

すりガラス効果はモダンなWebサイトでよく使われるデザインパターンです。背景画像との組み合わせはCSSの背景設定で学べます。

実践コード例③：drop-shadow()で透過PNG画像に影をつける

/* box-shadow: 要素の「箱」に影がつく（透過部分も四角い影） */
.icon-box-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* drop-shadow: 要素の「形」に沿って影がつく */
.icon-drop-shadow {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* ロゴやアイコンなど透過画像に最適 */
.logo {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

透過PNG画像に影をつけたい場合はdrop-shadow()を使いましょう。box-shadowだと四角い影になってしまいます。box-shadowの詳細はbox-shadowで影をつける方法を参照してください。

よくある間違い・注意点

❌ filterは子要素にも影響する

親要素にfilterをかけると、子要素にも効果が適用されます。テキストまでぼけてしまう場合は、背景だけに効果をかけたい → backdrop-filter を使いましょう。

❌ blur()の値が大きいとパフォーマンスに影響

blur(20px) 以上の大きなぼかしは描画コストが高いです。特にスクロール中に適用する場合は注意しましょう。

drop-shadowとbox-shadowの使い分け

• box-shadow: カード・ボタンなど四角い要素の影
• drop-shadow(): 透過画像・不規則な形の要素の影

ブラウザ対応状況

filter は全モダンブラウザで対応しています。backdrop-filter もChrome・Safari・Edge・Firefoxで対応済みです。

filterプロパティは複数を組み合わせることもできます。たとえばblur(1px)とbrightness(0.8)を同時に指定すると、少しぼかしつつ暗くする効果が得られます。スペースで区切って並べるだけです。画像にカーソルを乗せたときだけfilterを変えれば、ホバーエフェクトとしても使えます。普段はgrayscale(100%)で白黒にしておき、ホバー時にgrayscale(0)でカラーに戻す、という演出は写真ギャラリーでよく使われます。

まとめ

まずはblur()とgrayscale()から試してみましょう。CSSの基礎全体はCSSとは？初心者向け解説で学べます。アニメーションとの組み合わせはCSSアニメーションの作り方を参照してください。

関連記事

• CSSとは？初心者向け解説 — CSS基礎に戻る
• CSSのhoverで動きをつける方法 — hoverとfilterの組み合わせ
• CSSトランジション入門 — filterのアニメーション
• box-shadowで影をつける方法 — box-shadowとdrop-shadowの比較
• CSSの背景設定 — 背景画像へのfilter適用
• CSSアニメーションの作り方 — filterを使ったアニメーション