CSS3 filter プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

全ての画像の色を白と黒 (100% グレー) に変更します：

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Mountain View
Original image
Mountain View
grayscale(100%)

Try it Yourself ❯

チップ: 他の "Try it Yourself" 例が下にあります。

定義と用法

filter プロパティは、要素（多くは <img>）に視覚効果（ぼかしや彩度など）を定義します。

デフォルト値： none
継承： 継承する
アニメーション可否： 可。animatable を参照
バージョン： CSS3
JavaScript 構文： object.style.WebkitFilter="grayscale(100%)" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -webkit- は、接頭辞付きで動作した最初のバージョンです。

プロパティ
filter 18.0 -webkit- 13.0 35.0 9.1
6.0 -webkit-		 15.0 -webkit-

注: Internet Explorer の古いバージョン（4.0 ～ 8.0）では、廃止された非標準の "filter" プロパティをサポートしていました。 これは主に、IE8 以下からサポートが必要なときに不透明度のために使われていました。

CSS 構文

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

チップ: 複数のフィルタを使用する場合は、各フィルタをスペースで区切ります（下の「その他の例」を参照してください）。

フィルタ関数

注: パーセント値（例えば 75%）を使用するフィルタは、小数値（例えば 0.75）でも指定できます。

Filter 説明 Play it
なし デフォルト値。効果を指定しません Play it ❯
blur(px) 画像にぼかし効果を適用します。値が大きいほど、ぼかしがより大きくなります。

値を指定しない場合は、0 が使用されます。		 Play it ❯
brightness(%) 画像の明度を調整します。

0% は、画像が真っ黒になります。
100% (1) は、デフォルトで、元の画像を表示します。
100% を超える値は、より明るくなります。		 Play it ❯
contrast(%) 画像のコントラストを調整します。

0% は、画像が真っ黒になります。
100% (1) は、デフォルトで、元の画像を表示します。
100% を超える値は、コントラストがより小さくなります。		 Play it ❯
drop-shadow(h-shadow v-shadow blur spread color) 画像にドロップシャドウ効果を適用します。

指定できる値：
h-shadow - 必須。横方向の影のピクセル値を指定します。負の値は、影を画像の左側に配置します。

v-shadow - 必須。縦方向の影のピクセル値を指定します。負の値は、影を画像の上側に配置します。

blur - 任意。これは、3 番目の値で、ピクセルでなければなりません。影にぼかし効果を追加します。 値が大きいほど、ぼやけが大きくなります（影が大きく薄くなる）。負の値は使用できません。 値が指定されていない場合は、0（影のエッジがシャープになる）が使用されます。

spread - 任意。これは、4 番目の値で、ピクセルでなければなりません。 正の値は影が拡大し、より大きくなり、負の値は影が縮小します。指定しない場合は 0（影は要素と同じサイズ）になります。
注: Chrome、Safari、Opera、およびおそらく他のブラウザも、この 4 番目の長さをサポートしていません。 追加された場合でもレンダリングされません。

color - 任意。影に色を追加します。指定しない場合、色はブラウザに依存します（多くの場合は黒）。

10px のぼかし効果を持つ、横・縦両方向に 8px の大きさの赤い影を作成する例：

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

チップ: このフィルタは、box-shadow プロパティに似ています。		 Play it ❯
grayscale(%) 画像をグレースケールに変換します。

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

注: 負の値は使用できません。		 Play it ❯
hue-rotate(deg) 画像に色相の回転が適用されます。値は、画像サンプルを調整する色相環の角度を定義します。 0deg はデフォルトで、元の画像を表します。

注: 最大値は 360deg です。		 Play it ❯
invert(%) 画像内のサンプルを反転させます。

0% (0) は、デフォルトで、元の画像を表します。
100% は、画像を完全に反転します。

注: 負の値は使用できません。		 Play it ❯
opacity(%) 画像の不透明度レベルを設定します。不透明度レベルは、以下のような透明度レベルを記述します：

0% は完全に透明。
100% (1) は、デフォルトで、元の画像表す（透明度なし）

注: 負の値は使用できません。
チップ: このフィルタは、opacity プロパティに似ています。		 Play it ❯
saturate(%) 彩度を変更します。

0% (0) は、画像を完全に無彩色にします。
100% はデフォルトで、元の画像を表します。
100% を超える値は、過彩度になります。

注: 負の値は使用できません。		 Play it ❯
sepia(%) 画像をセピア調に変換します。

0% (0) はデフォルトで、元の画像を表します。
100% は、画像を完全にセピア色にします。

注: 負の値は使用できません。		 Play it ❯
url() url() 関数には、SVG フィルタを指定する XML ファイルの場所を、場合によっては特定のフィルタ要素にアンカーを含めて指定します。例：

filter: url(svg-url#element-id)
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。inherit を参照
Examples

その他の例

ぼかしの例

画像にぼかし効果を適用します：

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Mountain View
Original image
Mountain View
blur(5px)

Try it Yourself ❯

明度の例

画像の明度を調整します：

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

Mountain View
Original image
Mountain View
brightness(200%)

Try it Yourself ❯

コントラストの例

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

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

Mountain View
Original image
Mountain View
contrast(200%)

Try it Yourself ❯

ドロップシャドウの例

画像にドロップシャドウ効果を適用します：

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

Mountain View
Original image
Mountain View
drop-shadow(8px 8px 10px red)

Try it Yourself ❯

グレースケールの例

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

img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

Mountain View
Original image
Mountain View
grayscale(50%)

Try it Yourself ❯

色相回転例

画像に色相回転を適用します：

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

Mountain View
Original image
Mountain View
hue-rotate(90deg)

Try it Yourself ❯

反転の例

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

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

Mountain View
Original image
Mountain View
invert(100%)

Try it Yourself ❯

不透明度の例

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

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

Mountain View
Original image
Mountain View
opacity(30%)

Try it Yourself ❯

彩度の例

画像の彩度を変更します：

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

Mountain View
Original image
Mountain View
saturate(800%)

Try it Yourself ❯

セピアの例

画像をセピアに変換します：

img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}

Mountain View
Original image
Mountain View
sepia(100%)

Try it Yourself ❯

フィルタの組み合わせ / 複数フィルタ

複数のフィルタを使用するには、各フィルタをスペースで区切ります。

注: 順序が重要です（例えば、sepia() の後に grayscale() を使用すると、結果は、完全に灰色な画像になります）。

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

Mountain View
Original image
Mountain View
contrast(200%) brightness(150%)

Try it Yourself ❯

すべてのフィルタ

すべてのフィルタ機能のデモ：

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}
Try it Yourself ❯

関連ページ

HTML DOM リファレンス：filter プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯