CSS filter 属性

定義と使用方法

フィルタ属性は、要素（通常は<img>）の視覚効果（例えば、ぼかしやサチュレーション）を定義します。

参照もしくは：

CSSチュートリアル：CSS画像

HTML DOMリファレンスマニュアル：フィルタ属性

例

すべての画像をブラックアンドホワイト（100%グレー）に変更する：

img {
  filter: grayscale(100%);
}

自分で試してみる

ヒント：ページの下部にTIYインスタンスがさらに見つかります。

CSS文法

フィルタ: ノーネットワーク | ブラー() | ブリガンス() | コントラスト() | ドロップシャドウ() | グレースケール() | ヒューローテート() | インバート() | オピケティティ() | サチュレート() | セピア() | URL();

ヒント：複数のフィルタを使用する場合は、各フィルタをスペースで区切ります（ページ下のさらに多くの例を参照してください）。

技術的詳細

デフォルト値： none
継承： いいえ
アニメーション制作： サポートされています。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.filter="grayscale(100%)"

フィルタ関数

注記：百分比值（例えば 75％）のフィルタを使用します。また、10進数（例えば 0.75）も受け入れます。

フィルタ 説明
none デフォルト値。効果を規定します。
blur(px)

画像にぼやけ効果を適用します。大きな値はもっとぼやけます。

指定された値がある場合、0を使用します。
brightness(%)

亮度を調整します。

  • 0％は画像が完全に黒くなります。
  • デフォルト値は 100％で、元の画像を表します。
  • 100％を超える値はもっと明るい結果を提供します。
contrast(%)

画像のコントラストを調整します。

  • 0％は画像が完全に黒くなります。
  • デフォルト値は 100％で、元の画像を表します。
  • 100％を超える値は、もっと高いコントラストの結果を提供します。
drop-shadow(h-shadow v-shadow blur spread color)

画像に影効果を適用します。

可能な値：

  • h-shadow - 必須。水平影のピクセル値を指定します。負の値は影を画像の左側に配置します。
  • v-shadow - 必須。垂直影のピクセル値を指定します。負の値は影を画像の上に配置します。

blur - オプション。これは第3の値で、ピクセル単位で指定する必要があります。影にぼやけ効果を追加します。値が大きいほど、もっとぼやけが生まれ、影がもっと大きく明るくなります。負の値は許可されません。指定しない場合、0（影の端が鋭利です）が使用されます。

spread - オプション。これは第4の値で、ピクセル単位で指定する必要があります。正の値は影を拡張し大きくするのに役立ちますが、負の値は影を小さくします。指定しない場合、0（影は要素の大きさと同じ）が使用されます。

注記：Chrome、Safari、Opera、そして他のブラウザも、第4の長さをサポートしていません；指定すると表示されません。

color - オプション。影に色を追加します。指定しない場合、色はブラウザによって決定されます（通常は黒です）。

この例では、赤い影を生成しています。水平および垂直方向ともに 8px、10px のぼやけ効果があります：

filter: drop-shadow(8px 8px 10px red);

ヒント：このフィルタはbox-shadow属性に似ています。
grayscale(%)

画像をグレースケールにします。

  • 0％（0）はデフォルト値で、元の画像を表します。
  • 100％は画像を完全にグレーにします（白黒画像に使用）。

注記：負の値は許可されません。
hue-rotate(deg)

画像に色相回転を適用します。この値は色環の度数を定義します。デフォルト値は0degで、元の画像を表します。

注記：最大値は360degです。
invert(%)

画像のサンプルを反転します。

  • 0％（0）はデフォルト値で、元の画像を表します。
  • 100％は画像を完全に反転します。

注記：負の値は許可されません。
opacity(%)

画像の不透明度レベルを設定します。opacity-levelは透明度レベルを説明し、以下の通りです：

  • 0％は完全に透明です。
  • 100％（1）はデフォルトで、元の画像（不透明）を表します。

注記：負の値は許可されません。

ヒント：このフィルタはopacity属性に似ています。
saturate(%)

画像の鮮度を設定します。

  • 0％（0）は画像を完全に非濃縮にします。
  • 100%はデフォルトで、元の画像を表します。
  • 100%以上の値は超濃縮された結果を提供します。

注記：負の値は許可されません。
sepia(%)

画像を茶色にします。

  • 0％（0）はデフォルト値で、元の画像を表します。
  • 100％は画像を完全に茶色にします。

注記：負の値は許可されません。
url()

url()関数は、SVGフィルタのXMLファイルの場所を指定し、特定のフィルタ要素のアンカーを含むことができます。例：

filter: url(svg-url#element-id);
initial この属性をデフォルト値に設定します。参照: initial。
inherit 親要素からこの属性を継承します。参照: inherit。

さらに多くの例

ぼかしの例

画像にぼかし効果を追加：

img {
  filter: blur(5px);
}

自分で試してみる

ぼかしの例 2

ぼかしの背景画像を適用：

img.background {
  filter: blur(35px);
}

自分で試してみる

明るさの例

画像の明るさを調整：

img {
  filter: brightness(200%);
}

自分で試してみる

コントラストの例

画像のコントラストを調整：

img {
  filter: contrast(200%);
}

自分で試してみる

影の例

画像に影効果を適用：

img {
  filter: drop-shadow(8px 8px 10px gray);
}

自分で試してみる

グレースケールの例

画像をグレースケールに変換します：

img {
  filter: grayscale(50%);
}

自分で試してみる

色相の例

画像に色相を回転させます：

img {
  filter: hue-rotate(90deg);
}

自分で試してみる

反転の例

画像のサンプルを反転します：

img {
  filter: invert(100%);
}

自分で試してみる

不透明度の例

画像の不透明度レベルを設定します：

img {
  filter: opacity(30%);
}

自分で試してみる

饱和度の例

画像の饱和度を調整します：

img {
  filter: saturate(800%);
}

自分で試してみる

茶色の例

画像を茶色に変換します：

img {
  filter: sepia(100%);
}

自分で試してみる

多重フィルタの使用

複数のフィルタを使用する場合、各フィルタ間にスペースを入れてください。順序が重要です（例えば、sepia()の後にgrayscale()を使用すると、完全にグレーの画像が生成されます）：

img {
  filter: contrast(200%) brightness(150%);
}

自分で試してみる

すべてのフィルタ

すべてのフィルターファンクションを示します：

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

自分で試してみる

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

「-webkit-」付きの数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

注記：より古いバージョンのInternet Explorer（4.0から8.0）は、非標準の「filter」属性をサポートしています。IE8およびそれ以前のバージョンのサポートが必要な場合、不透明度に主に使用されます。