【CSS】filter プロパティの使い方｜blur・brightness・grayscale・drop-shadow で画像や要素を加工する

CSS の filter プロパティを使うと、画像や要素にぼかし・明るさ調整・モノクロ化・色調変化といった視覚効果を、画像編集ソフトを使わずに CSS だけで加えられます。この記事では filter の基本構文から、blur・brightness・grayscale・contrast・drop-shadow など主要な関数の使い方、複数効果の組み合わせ、ホバーでの活用までを、実際に動かせるデモとあわせて解説します。CSS の見た目調整を一歩深めたい初心者〜中級者の方を対象としています。

filter プロパティで何ができるのか

filter は、要素の見た目に「フィルター効果（画像加工のような効果）」を適用するプロパティです。写真をモノクロにしたり、ぼかしを入れたり、明るさやコントラストを調整したりといった処理を、元の画像ファイルには手を加えずに表示上だけで実現できます。

画像（img）に対してよく使われますが、対象は画像に限りません。テキストやボタン、div など、どんな要素にも適用できます。たとえば「ふだんはモノクロにしておき、ホバーしたときだけ色を戻す」といった演出も、JavaScript なしで書けるのが大きな利点です。

基本の書き方

filter の値には「フィルター関数」を指定します。書式は filter: 関数名(値) です。たとえば画像を 4px ぼかすなら次のように書きます。

/* 画像を 4px ぼかす */
img {
  filter: blur(4px);
}

/* 効果をかけない（初期値） */
img {
  filter: none;
}

効果を打ち消したいときは filter: none を指定します。これは初期値でもあり、ホバー時に元へ戻す用途でよく使います。

主なフィルター関数の一覧

filter で使える代表的な関数と、その役割・値の目安をまとめました。多くの関数は 0%〜100%（または 0〜1）で指定し、0 が「効果なし」または「効果最大」のどちらになるかは関数ごとに異なります。

次のデモでは、同じグラデーションのボックスにそれぞれ違うフィルターをかけて並べています。CSS タブを開くと、各クラスにどの関数を指定しているかを確認できます。

<div class="gallery">
  <figure class="card">
    <div class="thumb"></div>
    <figcaption>元の画像</figcaption>
  </figure>
  <figure class="card">
    <div class="thumb blur"></div>
    <figcaption>blur(4px)</figcaption>
  </figure>
  <figure class="card">
    <div class="thumb grayscale"></div>
    <figcaption>grayscale(100%)</figcaption>
  </figure>
  <figure class="card">
    <div class="thumb bright"></div>
    <figcaption>brightness(1.6)</figcaption>
  </figure>
  <figure class="card">
    <div class="thumb sepia"></div>
    <figcaption>sepia(100%)</figcaption>
  </figure>
  <figure class="card">
    <div class="thumb combo"></div>
    <figcaption>contrast＋hue-rotate</figcaption>
  </figure>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: sans-serif;
  background: #f5f5f7;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  margin: 0;
  text-align: center;
}

/* 画像の代わりにカラフルなグラデーションを使う */
.thumb {
  height: 110px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff6b6b 0%, #f7d154 40%, #4dabf7 100%);
}

.card figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
}

/* それぞれ違う filter をかける */
.blur      { filter: blur(4px); }
.grayscale { filter: grayscale(100%); }
.bright    { filter: brightness(1.6); }
.sepia     { filter: sepia(100%); }

/* 複数の関数はスペース区切りで並べる（左から順に適用） */
.combo     { filter: contrast(1.4) hue-rotate(120deg); }

複数の関数を組み合わせる

複数の効果を同時にかけたいときは、関数を半角スペースで区切って並べます。カンマは使いません。効果は書いた順（左から右）に適用されるため、並び順によって結果が変わる点に注意してください。

/* モノクロにしてから少し明るく、コントラストを上げる */
.image {
  filter: grayscale(100%) brightness(1.1) contrast(1.2);
}

同じ関数を 2 回書くこともできますが、基本的には 1 つの効果につき 1 回にまとめておくと分かりやすくなります。値を 0 や none にすれば、その効果だけを無効化できます。

drop-shadow と box-shadow の違い

影を付けるプロパティとしては box-shadow が有名ですが、filter: drop-shadow() にも影を付ける働きがあります。両者の決定的な違いは「影が付く範囲」です。

box-shadow は要素の矩形（四角いボックス）に対して影を落とします。そのため、PNG の透過部分や角丸を持つ要素でも、影は四角い枠の形になります。一方 drop-shadow() は要素の不透明な部分の形そのものに沿って影を付けます。透過 PNG の人物切り抜きや、clip-path で切り取った三角形などに使うと、形通りの自然な影になります。

/* 四角いボックスの形に影が付く */
.box {
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
}

/* 透過部分を除いた「形」に沿って影が付く */
.logo {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

記述の順番も少し異なり、drop-shadow() は box-shadow と違って inset（内側の影）や広がり（spread）の値は指定できません。透過画像やアイコンには drop-shadow()、通常の四角い要素には box-shadow、と覚えておくとよいでしょう。

ホバーで色を戻す演出を作る

filter は transition と組み合わせると、ホバー時になめらかに効果を変化させられます。次のデモは「ふだんはモノクロ＋少し暗め、ホバーで filter: none にして本来の色を見せる」という、ギャラリーやサムネイル一覧でよく使われる演出です。各ボックスにマウスを乗せてみてください。

<p class="note">カードにマウスを乗せると、グレースケールが解除されて鮮やかになります。</p>
<div class="cards">
  <div class="photo photo--1"></div>
  <div class="photo photo--2"></div>
  <div class="photo photo--3"></div>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: sans-serif;
  background: #f5f5f7;
}

.note {
  font-size: 13px;
  color: #555;
  margin: 0 0 16px;
}

.cards {
  display: flex;
  gap: 16px;
}

.photo {
  flex: 1;
  height: 120px;
  border-radius: 10px;
  cursor: pointer;

  /* ふだんは色を抜いて少し暗くしておく */
  filter: grayscale(100%) brightness(0.9);
  /* filter の変化をなめらかにする */
  transition: filter 0.3s ease;
}

.photo--1 { background: linear-gradient(135deg, #ff6b6b, #f7d154); }
.photo--2 { background: linear-gradient(135deg, #4dabf7, #b197fc); }
.photo--3 { background: linear-gradient(135deg, #51cf66, #4dabf7); }

/* ホバーで filter を打ち消す（none で元に戻る） */
.photo:hover {
  filter: none;
}

transition: filter 0.3s ease を指定しているので、色が戻るときにアニメーションが効きます。transition を外すと、ホバーした瞬間にパッと切り替わるだけになります。

使うときに気をつけたいこと

効果は要素全体にかかる

filter は指定した要素と、その子要素すべてにまとめてかかります。たとえば画像とキャプションを含む div に blur() をかけると、画像だけでなくキャプションの文字までぼけてしまいます。画像だけをぼかしたいなら、filter は img 要素そのものに指定しましょう。背景だけにフィルターをかけたい場合は、別プロパティの backdrop-filter が向いています。

レイアウトのサイズには影響しない

blur() でぼけた縁がはみ出して見えても、drop-shadow() で影が広がっても、要素が占めるレイアウト上の領域（ボックスサイズ）は変わりません。あくまで見た目の描画だけが変化します。そのため、ぼかしの縁が隣の要素と重なって見えることがあります。気になる場合は margin や padding で余白を確保してください。

かけすぎると重くなる

blur() のような効果は描画コストが高く、大きな要素に強くかけたり、多数の要素に同時に適用したりすると、スクロールやアニメーションが重くなることがあります。特にスマートフォンでは影響が出やすいので、値を控えめにする、対象を絞るといった配慮をするとよいでしょう。

まとめ

filter プロパティは、CSS だけで画像や要素に視覚効果を加えられる便利な機能です。書式は filter: 関数(値) で、blur・brightness・grayscale・contrast・sepia・hue-rotate・drop-shadow など多くの関数を、半角スペースで区切って組み合わせられます。影を付ける drop-shadow() は、四角い枠に影を落とす box-shadow と違い、形に沿った影を付けられるのが特徴でした。transition と組み合わせればホバー演出も簡単に作れます。一方で、効果は子要素まで及ぶこと、レイアウトサイズには影響しないこと、かけすぎると描画が重くなることに注意して使いましょう。

参考ページ

• filter – CSS: カスケーディングスタイルシート | MDN
• <filter-function> – CSS: カスケーディングスタイルシート | MDN
• drop-shadow() – CSS: カスケーディングスタイルシート | MDN