filter

style.css

/* ぼかし */
filter: blur(5px);

/* 明るさ（1.0が基準、1.5で1.5倍） */
filter: brightness(1.5);

/* コントラスト（100%が基準、200%で強調） */
filter: contrast(200%);

/* グレースケール（0%がカラー、100%が完全グレー） */
filter: grayscale(100%);

/* セピア */
filter: sepia(80%);

/* 色相回転 */
filter: hue-rotate(90deg);

/* 色反転 */
filter: invert(100%);

/* 透明度 */
filter: opacity(0.5);

/* ドロップシャドウ（影のX・Y・ぼかし・色） */
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5));

/* 複数のフィルタを組み合わせる */
filter: brightness(1.2) contrast(110%) saturate(130%);

/* 古いブラウザ対応（ベンダープレフィックス） */
-webkit-filter: blur(5px); /* 古いバージョンのChromeとSafariに対応時に指定 */
filter: blur(5px);

値	デフォルト値	効果
brightness()	1.0	明るさ
blur()	0px	ぼかし
contrast()	100%	コントラスト
grayscale()	0%	グレースケール
hue-rotate()	0deg	色相変換
invert()	0px	色相反転
saturate()	100%	彩度
sepia()	0%	セピア
opacity()	1.0	透明度
drop-shadow()	none	ドロップシャドウ

サンプルは下記の画像にフィルタ効果を適用させています。

img{
	-webkit-filter: brightness(1.5);
	-moz-filter: brightness(1.5);
	filter: brightness(1.5);
}

img{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	filter: blur(5px);
}

img{
	-webkit-filter: contrast(200%);
	-moz-filter: contrast(200%);
	filter: contrast(200%);
}

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

img{
	-webkit-filter: hue-rotate(180deg);
	-moz-filter: hue-rotate(180deg);
	filter: hue-rotate(180deg);
}

img{
	-webkit-filter: invert(40%);
	-moz-filter: invert(40%);
	filter: invert(40%);
}

img{
	-webkit-filter: saturate(200%);
	-moz-filter: saturate(200%);
	filter: saturate(200%);}

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

img{
	-webkit-filter: opacity(0.5);
	-moz-filter: opacity(0.5);
	filter: opacity(0.5);}

img{
	-webkit-filter: drop-shadow(5px 5px 5px red);
	-moz-filter: drop-shadow(5px 5px 5px red);
	filter: drop-shadow(5px 5px 5px red);

※ バージョン情報は MDN / Can I Use に基づいています。

※Android5系の標準ブラウザから対応してます。

※IE9以下は指定の方法が違うので、下記の概要を参照してください。

画像やテキストなど指定した要素に様々なフィルタ効果を指定することができます。

元々はIE独自のプロパティで、IE9以下で使用するときは上記で説明した使い方ではなく値を『progid:DXImageTransform.Microsoft.フィルタ名()』と指定して使用する必要があります。使用できるフィルタの種類と値も違っております。

IE9以下で使用できる値一覧

値	効果
Blur(PixelRadius=数値)	ぼかし
gradient()	グラデーション
alpha(opacity=数値)	透明度

※下記のサンプルはIE9以下でのプロパティの為、IEの開発者ツール等で確認してください。

img{
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=80);
}

gradient()はCSSの『linear-gradient()』と効果は同じですが、細かな調整ができず『開始時の色』、『終了時の色』、『グラデーションの縦横方向』のみ指定ができます。また円形のグラデーション『radial-gradient()』にも対応はできません。指定の仕方は『progid:DXImageTransform.Microsoft.gradient(startColorstr="開始時の色", endColorstr="終了時の色",GradientType=0 )』縦横の方向を指定は、『GradientType=』0で縦方向、1で横方向になり省略することも可能ですが、省略したときは自動的に縦方向になります。

div{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#ffffff",GradientType=1);
}

透明度を指定するときは、IE独自の仕様ですが『progid:DXImageTransform.Microsoft.フィルタ名()』を指定する必要はなく『filter:alpha(opacity=数値)』と指定することによりIE9のブラウザでも、『opacity』と同じ効果を指定できます。

img{
	filter:alpha(opacity=70);
}

この他にもIE独自のプロパティがありますが、現在では指定をしても適用しておりません。