filter

style.css

/* blur */
filter: blur(5px);

/* brightness (1.0 = original, 1.5 = 1.5x brighter) */
filter: brightness(1.5);

/* contrast (100% = original, 200% = enhanced) */
filter: contrast(200%);

/* grayscale (0% = color, 100% = full gray) */
filter: grayscale(100%);

/* sepia */
filter: sepia(80%);

/* hue rotation */
filter: hue-rotate(90deg);

/* invert colors */
filter: invert(100%);

/* opacity */
filter: opacity(0.5);

/* drop shadow (x, y, blur, color) */
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5));

/* combining multiple filters */
filter: brightness(1.2) contrast(110%) saturate(130%);

/* older browser support (vendor prefix) */
-webkit-filter: blur(5px); /* For older versions of Chrome and Safari */
filter: blur(5px);

Value	Default	Effect
brightness()	1.0	Brightness
blur()	0px	Blur
contrast()	100%	Contrast
grayscale()	0%	Grayscale
hue-rotate()	0deg	Hue rotation
invert()	0px	Color inversion
saturate()	100%	Saturation
sepia()	0%	Sepia
opacity()	1.0	Opacity
drop-shadow()	none	Drop shadow

The samples below apply filter effects to the following image.

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

※ Version data based on MDN / Can I Use.

※ Supported from Android 5 standard browser onwards.

※ IE9 and earlier use a different syntax — see the overview below.

Applies various filter effects to elements such as images and text.

This property was originally IE-specific. For IE9 and earlier, you must use the syntax progid:DXImageTransform.Microsoft.FilterName() instead of the CSS3 syntax described above. The available filter types and values also differ.

Values available for IE9 and earlier

Value	Effect
Blur(PixelRadius=number)	Blur
gradient()	Gradient
alpha(opacity=number)	Opacity

※ The samples below use IE9-specific syntax. Check them with IE developer tools.

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

The gradient() function has the same effect as CSS linear-gradient(), but with limited options — you can only specify the start color, end color, and direction (horizontal or vertical). Radial gradients like radial-gradient() are not supported. Use the syntax progid:DXImageTransform.Microsoft.gradient(startColorstr="start-color", endColorstr="end-color", GradientType=0). Set GradientType to 0 for vertical and 1 for horizontal (defaults to vertical if omitted).

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

For opacity, you can use the simpler syntax filter:alpha(opacity=number) without the progid prefix. This provides the same effect as opacity and works in IE9.

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

There are other IE-specific filter values, but they are no longer applied in modern browsers.