画像などの要素に対して、ぼかし、影つけ、透明化などのフィルタを適用します。Internet Explorer ではサポートされていません。下記の例では元の画像(左)に、ぼかしのフィルタを適用しています。

<img src="neko.jpg">
<img src="neko.jpg" style="filter:blur(2px)">

一度に複数のフィルタを適用することも可能です。下記の例では、ぼかしと透明化のフィルタを適用しています。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:blur(2px) opacity(40%)">

画像だけではなく、テキストなどの要素に対しても適用できます。

<span style="font-size:24pt;">FILTER</span>
<span style="font-size:24pt; filter:drop-shadow(3px 3px 1px #999)">FILTER</span>

要素をぼかします。length にはぼかしの強さを 2px などの長さで指定します。省略時のデフォルト値は 0px (ぼかし無し) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:blur(2px)">

要素の明暗を調整します。rate には 1.7 や 170% などの強度を指定します。省略時のデフォルト値は 1 (変更無し) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:brightness(1.7)">

要素のコントラストを指定します。rate には 1.7 や 170% などの強度を指定します。省略時のデフォルト値は 1 (変更無し) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:contrast(2.0)">

要素に影をつけます。x と y には影を右方向、下方向にどのくらいずらして表示するかを指定します。blur には影をぼかす度合いを指定します。省略時は 0 (ぼかし無し)とみなされます。color には影の色を指定します。省略時は現在の color 値が適用されます。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:drop-shadow(6px 6px 2px #999)">

要素をグレーにします。rate には 0%～100% または 0～1.0 までの度合いを指定します。省略時のデフォルト値は 1 (完全にグレー化) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:grayscale(1.0)">

要素の色相を変換します。angle には 0deg ～ 360deg の色相変化量を指定します。省略時のデフォルト値は 0deg (変化無し) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:hue-rotate(180deg)">

要素の階調を反転させます。rate には 0%～100% または 0～1.0 までの反転度合いを指定します。省略時のデフォルト値は 1 (完全反転) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:invert(100%)">

要素を透明にします。rate には 0%～100% または 0～1.0 までの不透明度を指定します。省略時のデフォルト値は 1 (完全不透明) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:opacity(30%)">

要素の彩度を調整します。rate には 1.7 や 170% の様な割合を指定します。省略時のデフォルト値は 1 (変更しない) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:saturate(200%)">

要素をセピア調にします。rate には 0%～100% または 0～1.0 までの度合いを指定します。省略時のデフォルト値は 1 (完全セピア化) です。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:sepia(100%)">

要素に SVGフィルタを適用します。下記の例では、画像に対して、SVG 中に定義された myFilter という名前のフィルタを適用しています。上記の組み込み関数のみを用いるよりも、より詳細なフィルタを作成することができます。

<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:url(#myFilter)">
<svg width="0px" height="0px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="myFilter">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>
</svg>

• https://drafts.fxtf.org/filter-effects/#FilterProperty
• https://developer.mozilla.org/ja/docs/Web/CSS/filter
• https://caniuse.com/#feat=css-filters