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
Written by Marco Sors
Related protips
5 Responses
Very nice! Thanks!
over 1 year ago
·
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/33777/10684317_693196797432883_114022871_n.jpg)
tnx it helped a lot;)
over 1 year ago
·
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/50779/9d474fe1f0a93c3faf349a881346ea84.jpeg)
Thanks for the tips
over 1 year ago
·
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/60245/f2f1b3071aa9f71fd3408d59edf41856.jpeg)
Thanks, this helped me a lot!
over 1 year ago
·
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/102485/blah.png)
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#