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

catnose · 2020/02/24 に最終更新

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

CSSのfilterの使い方

書き方

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

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

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

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

filterによる加工例

サンプルで使う画像

フィルター前の画像

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

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

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

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

CSSフィルターの種類

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

brightness（30%明度）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

saturate（彩度）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

contrast（コントラスト）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

blur（ぼかし）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

grayscale（グレースケール）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

sepia（セピア）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

hue-rotate（色相）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

invert（階調）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

opacity（画像の透明度）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

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

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

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

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

drop-shadow（ドロップシャドウ）

<div class="container">
  <div>
    フィルター前
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" loading="lazy">
  </div>
  <div>
    フィルター後
    <img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
</style>

.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なら画像の中のオブジェクトに影をつけてくれる点です。

<div class="container">
  <div>
    box-shadow
    <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f367.svg" class="box-shadow" loading="lazy">
  </div>
  <div>
    filter: drop-shadow
    <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f367.svg" class="drop-shadow" loading="lazy">
  </div>
</div>
<style>.container {
  display: table;
  table-layout: fixed;
  margin: 0 -3px;
}
.container div {
  display: table-cell;
  border: solid 3px #FFF;
  font-size: 12px;
  text-align: center;
  color: gray;
}
.container img {
  width: 80%;
}
</style>

.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です。

<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy" width="200" style="display: block; margin: 0 auto;">

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

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

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

<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy" width="200" style="display: block; margin: 0 auto;">

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

カーソルをのせると…

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

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

フィルターをかけない（filter: none）

<img src="https://res.cloudinary.com/code-kitchen/image/upload/c_lfill,w_1100/q_auto/v1582515398/posts/wpztyezydkbszh6n9ypz.jpg" class="example" loading="lazy" width="200" style="display: block; margin: 0 auto;">

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

カーソルをのせると…

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

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

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

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

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

<a href="#" class="card">
  <img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582515398/posts/iqrcbfz5cxbinq8ik14o.jpg" loading="lazy" class="card__img">
  <div class="card__title">Are You Ready?</div>
</a>

.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

18〜
Safari

6〜
Firefox

35〜
Edge

79〜
IE

未対応

📱モバイル

Android Chrome

108〜
iOS Safari

6〜

caniuse.comで詳しく見る