Tag Archives: css3

CSS3 – change image – blur, brightness, saturation, hue, contrast, invert colors, grayscale and sepia

Sh*ts, , , , , , , , ,

So, if you plan to change some of image properties with CSS filter is your solution.

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

You can replace filter with the following values

  • blur
  • brightness
  • saturate,
  • hue-rotate
  • contrast
  • invert
  • grayscale
  • sepia

Example

filter: invert(100%);
// Browser Specific
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

Concat/concatenate then

filter: blur(5px) brightness(0.5);

 

More readings

http://codepen.io/rss/pen/ftnDd
http://www.inserthtml.com/2012/06/css-filters/