ruaoig
Last Updated: July 27, 2016
·
20.18K
· marcosors
Bagnino

CSS3 image filters

Today CSS3 image filters work only in Chrome, but it's fun to start playing with them. Here's a complete list:

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

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

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

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

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

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

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

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

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

In case you want to get ready for the future you can target also the other browsers with these prefixes:

-moz-filter: filter-name;
-o-filter: filter-name;
-ms-filter: filter-name; 

Check out some examples here: http://www.web-expert.it/summer-lab/css3-filters/holidays-colours.html

Say Thanks
Respond

6 Responses
Add your response

455

Very nice! Thanks!

over 1 year ago ·
2482
Ce002d51954c216ac38512cd42cd6a72

Nice! They also work in safari. BUT not so nice.. (Images flicker some times)

over 1 year ago ·
3706
10684317 693196797432883 114022871 n

tnx it helped a lot;)

over 1 year ago ·
4256
9d474fe1f0a93c3faf349a881346ea84

Thanks for the tips

over 1 year ago ·
4607
F2f1b3071aa9f71fd3408d59edf41856

Thanks, this helped me a lot!

over 1 year ago ·
13625
Blah

What about filter drop-shadow? It's amazing when it's used on PNG images with some transparency or elements with ::before and ::after pseudo-elements.

over 1 year ago ·