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

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


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


Leave a Reply

Your email address will not be published. Required fields are marked *