filter

/* <filter-function> 値 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* 複数のフィルター */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* フィルターを使用しない */
filter: none;

/* グローバル値 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

次のように関数と共に使用してください。

filter: <filter-function> [<filter-function>]* | none;

url() を使用して SVG の filter 要素を参照することができます。 SVG の <filter> 要素を参照するには、次のような構文を使用してください。

filter: url(file.svg#filter-element-id);

filter プロパティは none または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は none を返します。特に示す場合を除いて、パーセント記号付きの値（34% など）を取る関数は、 10 進数の値（0.34 など）も受け付けます。

filter プロパティ値に複数の関数が指定されている場合、フィルターは順番通りに適用されます。

blur()

入力画像にガウスぼかしを適用します。

css

filter: blur(5px);

brightness()

関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 0% の値を設定すると、完全な黒の画像が作成されます。 100% の値を指定すると、入力は変更されません。 100% を超える値が許されており、より明るい結果が得られます。

css

filter: brightness(2);

contrast()

入力画像のコントラストを調整します。 0% の値を指定するとグレーの画像が作成されます。 100% の値を指定すると、入力画像は変更されません。 100% を超える値を指定すると、コントラストを増加させます。

css

filter: contrast(200%);

drop-shadow()

引数 <shadow> を画像の輪郭に沿ってドロップシャドウとして適用します。影の構文は <box-shadow> （CSS 背景と境界モジュールで定義されています）と似ていますが、inset キーワードと spread 引数は使用できません。すべての filter プロパティ値と同様に、drop-shadow() 以降のフィルターが影に適用されます。

css

filter: drop-shadow(16px 16px 10px black);

grayscale()

画像をグレースケールに変換します。値 100% は完全にグレースケールです。初期値の 0% は入力を変更しません。 0% と 100% の間の値は、効果に対する線形乗数です。

css

filter: grayscale(100%);

hue-rotate()

色相の角度を回転させます。 <angle> の値は、入力サンプルが調整される色相環の度数を定義します。 0deg の値では入力は変更されません。

css

filter: hue-rotate(90deg);

invert()

入力画像のサンプルを反転します。 100% の値を指定すると、完全に反転されます。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。

css

filter: invert(100%);

opacity()

透過率を適用します。 0% は画像を完全に透明にし、 100% は画像をそのままにします。

css

filter: opacity(50%);

saturate()

画像の彩度を設定します。 0% は完全に彩度をなくし、 100% はそのまま、 100% 以上の値は彩度を上げます。

css

filter: saturate(200%);

sepia()

画像をセピア調にします。値を 100% にすると画像は完全にセピアになり、0% にすると何も変わりません。

css

filter: sepia(100%);

関数をいくつでも組み合わせてレンダリングを操作できます。フィルターは宣言順に適用されます。次の例は画像のコントラストと明るさを強調します。

filter: contrast(175%) brightness(103%);

アニメーション時、最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 <url> を持たない場合、それぞれのフィルター関数は、その特有の規則に従って補間されます。

フィルターリストが異なる形で掲載されている場合、長い方のリストに欠けている同等のフィルター関数が、短い方のリストの終わりに追加されます。追加された関数は、フィルターを変更していない初期値を使用します。掲載されているすべてのフィルターは、フィルター関数特有の仕様に従って補間されます。それ以外の場合は離散補間を用います。

filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<url> = 
  <url()>  |
  <src()>  

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

filter プロパティは 2 つ目の画像に適用され、画像とその境界の両方を灰色にして不鮮明にします。

img {
  border: 5px solid yellow;
}
/* 2 番目の画像を 40% グレー化、 5px でぼかす */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

<img src="pencil.jpg" alt="元画像はシャープ" />
<img src="pencil.jpg" alt="画像と境界は不鮮明でミュートされています。" />

フィルター機能は現れる順に適用されます。同じフィルター関数を繰り返すことができます。

#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

<svg
  id="MDN-logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 361 104.2"
  xml:space="preserve"
  role="img">
  <title>MDN Web Docs</title>
  <path
    d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
    style="fill: var(--text-primary);"></path>
  <g style="fill:blue;">
    <path
      d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>

フィルターは順番に適用されます。最初のドロップシャドウの色相は hue-rotate() と関数によって変更されますが、 2 つ目のドロップシャドウの色相は変更されません。

• CSS backdrop-filter プロパティ
• CSS 合成と混合モジュール（CSS の background-blend-mode および mix-blend-mode プロパティを含む）
• CSS の mask プロパティ
• SVG （SVG の <filter> 要素や filter 属性を含む）
• HTML コンテンツへの SVG 効果の適用