filter 画像にフィルターをかける

CSSのfilterフィルタープロパティを使うと、画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたりすることが可能です。このページではfilterの使い方をサンプルCSS付きで解説します。

CSSのfilterの使い方

書き方

CSSのfilterは次の図のように書きます。

CSSのfilterプロパティの使い方

filter: sepia(70%)とすれば「画像を70%の強さセピアに」という意味になります。

sepiacontrastに変えれば「彩度」を調整するフィルターになります。70%100%に変えれば、よりフィルターの効きが強くなります。

filterによる加工例

サンプルで使う画像

フィルター前の画像

実際に、この画像にセピア・フィルターをかけてみたいと思います。HTMLでは次のようにexampleというクラスを指定しておきます。

<img src="◯◯.jpg" class="example" loading="lazy">

✍️すべての画像(<img>)にフィルターが適用されてしまうのは不便だと思うので、exampleというクラスを持つ画像のみフィルターをかけることにします。

.example {
  filter: sepia(70%);
}

👆写真がセピア調になったのが分かると思います。filterを使えば、このように画像を簡単に加工できるのです。

CSSフィルターの種類

ここからはフィルターの種類をサンプル付きで紹介します。

brightness(30%明度)

.example {
  filter: brightness(200%);
}

brightnessブライトネスでは、明るさを調整します。100%が元の明るさを表します。brightness(200%)とすると、元の2倍の明るさになります。
逆に暗くしたいときにはbrightness(30%)のように100%以下の数値にします。

saturate(彩度)

.example {
  filter: saturate(200%);
}

saturateサーチュレイトでは、彩度を調整します。100%が元の彩度を表します。より鮮やかにしたければsaturate(200%)のように100%以上の数値にします。
彩度を下げるときはsaturate(30%)のように100%以下の数値にします。0%で白黒画像になります。

contrast(コントラスト)

.example {
  filter: contrast(200%);
}

contrastではコントラストを調整します。100%が元のコントラストを表します。コントラストを上げるにはcontrast(200%)のように100%以上の数値にします。
コントラストを下げるときはcontrast(30%)のように100%以下の数値にします。

blur(ぼかし)

.example {
  filter: blur(2px);
}

blurブラーを使うと、画像をぼかすことができます。ポイントは、%ではなくpxでぼかしの強さを指定する点です。実際にぼかしを適用しながら、少しずつpx値を調整するのが良いでしょう。

grayscale(グレースケール)

.example {
  filter: grayscale(70%);
}

grayscaleグレースケールは画像をモノクロにしたいときに使います。0%が元の状態で、100%で完全にモノクロになります。

sepia(セピア)

.example {
  filter: sepia(90%);
}

sepiaは画像をセピアにするためのものです。0%が元の状態で、100%で完全にセピアになります。

hue-rotate(色相)

.example {
  filter: hue-rotate(30deg);
}

あまり使う機会はないような気もしますが、hue-rotateを使うと色相を変更できます。ポイントはhue-rotate(◯◯deg)のように数値をdegで指定することです。
180degで色相が反転します。360degにすると(一周回って)元の色相になります。

invert(階調)

.example {
  filter: invert(100%);
}

invertインヴァートは階調を調整するときに使います。0%だと元の状態のままとなり、100%だと階調が反転します。

opacity(画像の透明度)

.example {
  filter: opacity(40%);
}

opacityオパシティでは、画像の透明度を調整します。%が小さいほど透明に近づきます。0%にすると完全に透明になり、100%にすると元の状態になります。

✍️ filter: opacityを使うメリット

CSSにopacityという同じく要素を透明にするプロパティがあります。どちらを使っても画像は透明になりますが、filter: opacity()を使った方が一部のブラウザでパフォーマンス的に優れていると言われています(参考リンク)。

drop-shadow(ドロップシャドウ)

.example {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}

drop-shadowドロップシャドウを使うと、画像に影をつけることができます。影の指定の仕方は、CSSのbox-shadowプロパティと基本的に同じでdrop-shadow(x方向 y方向 ぼかし半径 色)というようになります。

drop-shadowとbox-shadowの違い

filter: drop-shadow()と、CSSのbox-shadowプロパティの違いは何なのでしょうか?大きな違いは、SVGやPNG画像を使ったときにdrop-shadowなら画像の中のオブジェクトに影をつけてくれる点です。

.box-shadow {
  box-shadow: 0 3px 5px silver;
}
.drop-shadow {
  filter: drop-shadow(0 3px 5px silver);
}

SVG画像を使った場合

👆box-shadowでは要素のまわりに影がつくのに対して、filter: drop-shadow()では画像の中に含まれる物体自体に影がついています。

また、一部のブラウザではfilter: drop-shadow()の方がパフォーマンスが優れています。

filterを使うときのテクニック

同時に複数のフィルターをかける

filter: フィルター1 フィルター2 フィルター3;

複数のフィルターをかけたい場合は、半角スペース区切りで並べて指定すればOKです。

.example {
  filter: brightness(70%) blur(1px);
}

👆このようにbrightness()blur()のフィルターを同時にかけることもできます。

ホバー時にフィルターをかける

.example {
  transition: 0.4s ease;
}
/* ホバー時のエフェクト */
.example:hover {
  filter: brightness(60%) blur(1px);
}

カーソルをのせると…

👆ホバー時(画像の上にカーソルをのせたとき)にのみフィルターをかけたい場合はimg:hover { filter: ◯◯ }のように指定すればOKです。

✍️フィルターをかける要素にtransitionプロパティを指定しておくと、フィルターのかかり方が滑らかになります。

フィルターをかけない(filter: none)

.example {
  transition: 0.4s ease;
  filter: brightness(60%) blur(1px);
}
/* ホバー時にフィルターを解除 */
.example:hover {
  filter: none;
}

カーソルをのせると…

👆逆に、あらかじめ画像にフィルターをかけておき、ホバー時にオフにする場合はfilter: noneを指定します。

動画にフィルターをかける

CSSのfilterは動画(<video>)やインラインフレーム(<iframe>)にも使用できます。

video {
  filter: grayscale(100%);
  transition: 0.3s;
}
video:hover {
  filter: none;
}

👆こちらは動画をモノクロにしておき、ホバー時にフィルターを解除する例です。

カードでfilterを使うCSSサンプル

最後にWebページでよく見るようなエフェクトのあるカードのサンプルを紹介します。

.card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
/* テキストをカード下に固定配置する */
.card__title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1em;
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  font-size: 1.6em;
}
.card__img {
  display: block;
  width: 100%;
  filter: brightness(70%); /* フィルター */
  transition: 0.3s; /* トランジション */
}
/* カードホバー時 */
.card:hover .card__img {
  filter: brightness(150%); /* フィルターを変更 */
  transform: scale(1.3); /* 画像を拡大 */
}

カーソルをのせると…

👆カードをホバーすると、画像が拡大しながら明るくなることが分かります。このようにfilterを使うと画像ファイルを編集することなく、フィルター加工できるようになります。

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    18〜
  • Safariのアイコン
    Safari
    6〜
  • Firefoxのアイコン
    Firefox
    35〜
  • Edgeのアイコン
    Edge
    79〜
  • IEのアイコン
    IE
    未対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    108〜
  • iOS Safariのアイコン
    iOS Safari
    6〜

caniuse.comで詳しく見る