filter

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

CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。SVG の filter 要素 (en-US)への URL で SVG フィルターを参照することもできます。

試してみましょう

構文

/* SVG フィルターへの URL */
filter: url("filters.svg#filter-id");

/* <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%);

/* 複数のフィルター */
filter: contrast(175%) brightness(3%);

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

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

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

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

SVG の <filter> (en-US) 要素への参照の場合は、次のようにしてください。

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

補間

アニメーション時、最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 url() を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間 (en-US)されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、初期値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが none である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。

関数

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

単一の filter プロパティに 2 つ以上の関数を指定した場合、同じフィルター関数を複数の filter プロパティで個別に適用した場合とは異なる結果になります。

SVG フィルター

url()

外部 XML ファイルに埋め込むことができる SVG フィルター (en-US)を指す URI を取ります。

filter: url(resources.svg#c1)

フィルター関数

blur()

blur() 関数は、入力画像にガウスぼかしを適用します。 radius の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための初期値は 0 です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。

filter: blur(5px)

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

brightness()

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

filter: brightness(2)

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

contrast()

contrast() 関数は、入力画像のコントラストを調整します。 0% の値を指定すると完全にグレーの画像が作成されます。 100% の値を指定すると、入力画像は変更されません。 100% を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の初期値は 1 です。

filter: contrast(200%)

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

drop-shadow()

drop-shadow() 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <shadow> 型 (CSS3 Backgrounds で定義) の引数を受け取りますが、 inset キーワードと spread 引数は使用できません。この関数は、より確立された box-shadow プロパティに似ています。違いはフィルターであること、一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションを提供していることです。 <shadow> 引数の値は次の通りです。

<offset-x> <offset-y> (必須)

2 つの <length> 値で、影をずらす大きさを設定します。 <offset-x> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <offset-y> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は <length> を参照してください。 両方の値が 0 である場合は、影は要素の背後に配置されます (そして、 <blur-radius> や <spread-radius> を設定することで、ぼかしの効果を生成することができます)。

<blur-radius> (オプション)

これは三番目の <length> 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 0 (影の縁がはっきりしている) になります。

<color> (オプション)

指定可能なキーワードや記述方法は <color> 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は <color> プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。

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

<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

grayscale()

grayscale() 関数は入力画像をグレースケールに変換します。 amount の値は変換の程度を定義します。 100% の値は完全にグレースケールになります。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の初期値は 0 です。

filter: grayscale(100%)

hue-rotate()

hue-rotate() 関数は、入力画像の色相を回転させます。 angle の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 0deg の値を指定すると入力は変更されません。補完時の初期値は 0 です。最大値はありませんが、 360deg を超える値の以上の値の場合は回り込みになります。

filter: hue-rotate(90deg)

<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate">
    <feColorMatrix type="hueRotate" values="90"/>
  </filter>
</svg>

invert()

invert() 関数は、入力画像のサンプルを反転します。 amount の値は、変換の度合を定義します。 100% の値を指定すると、完全に反転されます。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の初期値は 0 です。

filter: invert(100%)

opacity()

opacity() 関数は、入力画像のサンプルに透過度を適用します。 amount の値は、変換の度合を定義します。 0% の値を指定すると、完全に透明になります。 100% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の初期値は 1 です。この関数は、より確立された opacity プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。

filter: opacity(50%)

saturate()

saturate() 関数は、入力画像の彩度を変化させます。 amount の値は、変換の度合を定義します。 0% の値を指定すると、無彩色になります。 100% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。 100% を超える値を指定することもでき、彩度を増した結果になります。補完時の初期値は 1 です。

filter: saturate(200%)

sepia()

sepia() 関数は、入力画像をセピア調にします。 amount の値は、変換の度合を定義します。 100% の値を指定すると、完全にセピア調になります。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の初期値は 0 です。

filter: sepia(100%)

関数の組み合わせ

いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。

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

公式定義

初期値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()>     

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

<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> ]? )

例

フィルター関数の適用

定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。

.mydiv {
  filter: grayscale(50%);
}

/* Gray all images by 50% and blur by 10px */
img {
  filter: grayscale(0.5) blur(10px);
}

SVG フィルターの適用

URL 関数を使用して SVG リソースを使用した例は以下の通りです。

.target {
  filter: url(#c1);
}

.mydiv {
  filter: url(commonfilters.xml#large-blur);
}

仕様書

Specification
Filter Effects Module Level 1
# FilterProperty

ブラウザーの互換性

BCD tables only load in the browser

関連情報