フィルター効果の使用

CSS のフィルター効果モジュールが提供するプロパティと関数を使用すれば、Photoshopを使用したり、余分なHTTPリクエストを送信することなく、上述の視覚効果を適用することができます。必要なソフトウェアはユーザーのブラウザーだけです。さらに、 CSS のフィルター効果は、あらかじめ設定された画像効果とは異なり、レスポンシブでアニメーションが可能です。

CSS フィルター効果モジュールでは、テキスト、画像、背景、境界線、またはこれらのプロパティを適用するその他の要素のレンダリングに影響を与えるために使用できる filter および backdrop-filter プロパティが提供されています。 このモジュールでは、不鮮明化や色変化などのグラフィック効果を追加できる <filter-function> データ型も定義しています。 フィルター関数を使用すると、要素の外観を変更できるだけでなく、作成したフィルターを使用して SVG フィルターを参照することもできます。

CSS フィルター効果モジュールの以下の 2 つのフィルタープロパティにより、要素にゼロ、 1 つ、または複数のグラフィック効果を適用することができます。

• filter プロパティを使用すると、要素がレンダリングされる前に、ぼかし、ドロップシャドウ、セピアなどのフィルター効果を適用することができます。フィルター効果は、要素のコンテンツ、境界線、パディングを含め、要素に直接適用されます。

• backdrop-filter プロパティを使用すると、要素の背後（要素の「背景」）にグラフィック効果を適用することができます。 前景のコンテンツをより読みやすくするために、 backdrop-filter プロパティが使用されることが多く、特にコンテンツが所有する大きな領域がコンテンツに十分なコントラストを提供していない場合に有効です。 フィルター効果は要素の背景のみに適用され、要素のコンテンツには適用されません。

filter および backdrop-filter プロパティは、フィルターのリストを空白で区切って受け入れ、宣言された順に適用されます。

CSS フィルター効果モジュールは、 10 個の <filter-function> 関数を提供するとともに、 url() 参照を使用して適用する SVG フィルターを使用して、無限に近い配列効果を定義する機能も提供します。

次の表には、 10 個のフィルター関数と、それらの値の型、該当する場合は最小有効値、効果を作成する最大値、および補間に使用される初期値が掲載されています。

最小値のあるフィルター関数は、最小値が含まれます。最小値未満の値をフィルター関数に指定すると、カンマ区切りのリストにある問題のフィルター関数だけでなく、プロパティ宣言全体が不正なものとなります。

最大効果値は超えることができます。 最大値として挙げられている値よりも大きな値を記載することは有効ですが、最大値として挙げられている値以上の効果をもたらすわけではありません。言い換えれば、要素に対する効果は、最大効果値が設定されている場合と同じになります。例えば、セピア調の例で sepia(400%) を設定すると、最大値である sepia(100%) と同じ効果が得られます。

既定値は、効果を作成しない値です。これらの値は効果を作成しませんが、初期補間値を提供し、値を設定する方法の例を示します。これらの既定値は、許可された最小値と最大効果値の間の基準値となります。

filter および backdrop-filter プロパティは、 1 つ以上の <filter-function>、既定のキーワード none、または SVG フィルターを指定する url() 値のリストを受け入れます。

下のセピア調の画像にカーソルを当てると、フルカラーの画像が即座に表示されます。

画像をセピア調にするには、 filter プロパティの値として sepia() フィルター関数を指定します。 :hover および :focus の時には、 filter: none を設定することでィルターが除去されます。

<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />

img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}

キーボードユーザーがタブ順序を変更せずにフォーカスできるように、 <img> 要素では tabindex を 0 に設定します。なぜなら、 <img> は操作可能な要素ではないからです。

img {
  max-width: 100%;
  height: 100%;
}

一般的に画像に適用される filter および backdrop-filter プロパティは、あらゆる要素や擬似要素に適用することができます。

この例では、 drop-shadow() フィルターを使用して、 3px のぼかしと 0 のオフセットで光彩効果を追加しています。

h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1>CSS フィルターで作成された光彩</h1>

セピア調 filter の例では、フィルター関数を 1 つしか指定していませんが、複数のフィルターを設定することができます。 filter および backdrop-filter プロパティには、空白で区切られたフィルターのリストを受け入れることができ、宣言された順番に適用されます。

この例では、 hue-rotate() と blur() の 2 つのフィルターを、 backdrop-filter プロパティを介して適用しています。背景（<p> 要素の背後の領域）には、色の変化とぼかしが適用されています。

.container {
  background: url(image.jpg) no-repeat left / contain goldenrod;
}
p {
  backdrop-filter: hue-rotate(240deg) blur(5px);
  background-color: rgb(255 255 255 / 10%);
  text-shadow: 2px 2px black;
}

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: #ffffff;
  font-size: 2rem;
  font-family: sans-serif;
}

<div
  class="container"
  style="background-image: url('https://mdn.github.io/shared-assets/images/examples/listen_to_black_women.jpg');">
  <p>
    画像上のテキストは、ドロップシャドウがあっても読みにくく、アクセシビリティがない場合があります。
  </p>
</div>

フィルターは順番に適用されるため、フィルター関数を複数回使用することができます。この例では、 drop-shadow() フィルターが 4 回使用されており、その時点ごとに異なる <shadow> 値が指定されています。

<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />

img {
  width: 49%;
}

img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
img + img {
  filter: none;
}

最初のマンダラの例では、 4 つのドロップシャドウが線描の SVG に適用されています。同じ SVG で、フィルターが filter: none で除去されたものが、比較用に含まれます。

フィルター効果を作成する際、 filter または backdrop-filter プロパティには、フィルターの別個のリストが指定されます。これらのフィルター効果は、現れる順番に適用されます。

この例では、レベル 1 見出しに magenta のドロップシャドウと 180deg 色相回転が適用されています。例えば、これらのフィルターが異なる順序で適用された場合の効果を示します。

h1 {
  color: midnightblue;
}
#hueFirst {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
}
#shadowFirst {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1 id="hueFirst">ドロップシャドウの前に色相の変更が行われています。</h1>
<h1 id="shadowFirst">色相の変更の前にドロップシャドウが適用されています。</h1>
<h1>フィルター効果が適用されていません。</h1>

同じフィルターが両方のテキスト行に適用されますが、順序は異なります。最初の行では、影が適用される前にテキストの色相が変更されるため、影は magenta になります。 2 つ目の行では、濃い青色のテキストにドロップシャドウが追加され、その後、テキストと影の色相が変更されます。

3 行目にはフィルター効果を適用せず、比較用に元の効果を表示させています。そのため、3行目は midnightblue または #191970 のままです。 hue-rotate(180deg) フィルターは、最初の 2 行のテキストを #252500 に変更します。

10 種類の定義済み <filter-function> に加えて、 CSS フィルター効果は url() に対応しており、引数には SVG フィルターを指定します。この引数は、内部または外部の SVG ファイルに埋め込むことができます。

単一の SVG を使用して、それぞれに id を持つ複数のフィルターを定義することができます。

<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

インラインおよび外部の SVG のどちらの url() でも、フィルターの id が参照されます。

filter: url(#blur3);
filter: url("https://example.com/svg/filters.svg#blur3");

blur() フィルター関数が適用された要素にガウスぼかしを適用するように、 SVG の <feGaussianBlur> フィルター要素もコンテンツをぼかすために使用することができます。

どちらの場合も、ぼかし半径の値は、 CSS では <length> として、また SVG ではピクセル数相当の <number> として指定され、ガウス関数に対する標準偏差の値を定義します。言い換えれば、画面に表示されるピクセルの内側へ溶け込むピクセル数を定義します。値が大きいほど、ぼかしが強くなります。

<filter> の stdDeviation 属性は、最大 2 つの値を受け入れ、より複雑なぼかし値を作成することができます。同等のぼかしを作成するには、 stdDeviation に 1 つの値を記載します。

<table cellpadding="5">
  <thead>
    <tr>
      <th>CSS の例</th>
      <th>SVG の例</th>
      <th>元画像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag"
          class="svgFilter" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

SVG の url() フィルター値は、SVG の <image> 要素の filter 属性の値として、または CSS　の filter および backdrop-filter プロパティの数値の一部として含めることができます。

.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url(#blur);
}

• mask
• background-blend-mode, mix-blend-mode
• CSS フィルター効果
• SVG の <filter> 要素、 SVG の filter 属性 'SVG)
• Applying SVG effects to HTML content