Learn how to use CSS3 Filters

Please make sure that you are using a browser that supports CSS3 filters or activate them via about:flags if you are running Microsoft Edge.

What are CSS3 Filters?

CSS3 filters allow you to change the rendering of an element before it is displayed in the document. You can blur, hue-rotate, sepia, saturate, etc. elements using a styling instruction with the 'filter' property.

You can even animate filters with @keyframes.

CSS
Result

Filter Samples

Original

Original image without CSS filters

Grayscale

Image with grayscale filter

img {filter: grayscale( %);}

Sepia

Image with sepia filter

img {filter: sepia( %);}

Saturate

Image with saturation filter

img {filter: saturate( %);}

Invert

Image with inverted colors filter

img {filter: invert( %);}

Opacity

Image with opacity filter

img {filter: opacity( %);}

Brightness

Image with brightness filter

img {filter: brightness( %);}

Contrast

Image with contrast filter

img {filter: contrast( %);}

Hue-Rotate

Image with hue rotation filter

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

Blur

Image with blur filter

img {filter: blur( px);}


Contributors

Last updated Sep 8, 2015

Categories
Share