1. 開発者向けのウェブ技術
  2. CSS: カスケーディングスタイルシート
  3. filter

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

filter

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年9月⁩.

* Some parts of this feature may have varying levels of support.

filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

いくつかの関数、例えば blur() や contrast() などが利用でき、あらかじめ定義された効果を実現するのに役立てることができます。

試してみましょう

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

<section id="default-example">
  <div class="example-container">
    <img
      id="example-element"
      src="/shared-assets/images/examples/firefox-logo.svg"
      width="200" />
  </div>
</section>

.example-container {
  background-color: #fff;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

構文

css
/* <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;

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

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

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

css
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%);

関数の組み合わせ

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

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

補間

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

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

公式定義

初期値none
適用対象すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り
アニメーションの種類フィルター関数のリスト

形式文法

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()>     

<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> ]? )
この構文は Filter Effects Module Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

フィルター関数の適用

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

css
img {
  border: 5px solid yellow;
}
/* 2 番目の画像を 40% グレー化、 5px でぼかす */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="元画像はシャープ" />
<img src="pencil.jpg" alt="画像と境界は不鮮明でミュートされています。" />

繰り返しフィルター機能

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

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

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

仕様書

Specification
Filter Effects Module Level 1
# FilterProperty

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content