HTML & CSS
Article

CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

By Gajendar Singh
CSS Filter Effects

A sample of the CSS filter effect possibilities in this article!

Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things. They can be used alone or in combination with other filters. You need to use the following syntax to apply filters in CSS:

filter: <filter-function> [<filter-function>]* | none

Now, let’s go over all these filters briefly.

Brightness

This filter controls the brightness of your images. It accepts values greater than or equal to zero as its parameter. A value of 0% will give you a completely black output. Similarly, a value of 100% will give you the original image. You can specify values greater than 100% to get even brighter images. For instance, a value of 300% will make the image 3 times as bright:

img {
  filter: brightness(300%);
}

Here is a CodePen with a brightness CSS filter in action:

See the Pen CSS Filter Example — Brightness by SitePoint (@SitePoint) on CodePen.

Contrast

This filter controls the contrast of your images. Just like the brightness filter, it also accepts values greater than or equal to zero. This filter controls the difference between dark and light parts of the image in CSS. Therefore, a value of 0% results in a gray image. Setting the contrast to 100% gives you the original image and any value beyond that will further increase the image contrast:

img {
  filter: contrast(0%);
}

Here is a CodePen with a contrast CSS filter in action:

See the Pen CSS Filter Example — Contrast by SitePoint (@SitePoint) on CodePen.

Grayscale

As evident from the name, this filter can help you make your images grayscale. This filter gradually converts all the colors in our images to some shade of gray. A value of 0% will have no effect on our images and a value of 100% will turn them completely grayscale. Negative values are not allowed.

img {
  filter: grayscale(100%);
}

Here is a CodePen with the grayscale CSS filter in action:

See the Pen CSS Filter Example — Grayscale by SitePoint (@SitePoint) on CodePen.

Saturate

This filter controls the saturation of colors in your images. A value of 0% will completely remove all colors from the image, while a value over 100% will make the image supersaturated. At 100%, the final result looks just like the original image. Negative values are not allowed for this filter.

img {
  filter: saturate(0%);
}

Here is a CodePen with the saturate CSS filter in action:

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

Sepia

This filter adds a sepia tinge to your images like some old photographs. The amount of sepia added depends on the percentage. At 0%, the final result looks like the original image and at 100% the image will be completely sepia.

img {
  filter: sepia(100%);
}

Here is a CodePen with the sepia CSS filter in action:

See the Pen CSS Filter Example — Sepia by SitePoint (@SitePoint) on CodePen.

Hue-rotate

This filter applies a hue-rotation to all the colors in your images. The angle at which the colors are rotated depends on the value of the parameter specified. At a value of 0deg, the image remains unchanged. There is no maximum value for this filter. However, the effect of values above 360deg wraps around. This means that both the values 90deg and 450deg will have the same effect.

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

Here is a CodePen with the hue-rotate CSS filter in action:

See the Pen Filter Hue-rotate by SitePoint (@SitePoint) on CodePen.

Invert

This filter inverts all the colors in your images. The amount of inversion depends on the value of the parameter passed. A value of 0% will not have any effect on the original image, but a value of 100% will completely invert it.

img {
  filter: invert(100%);
}

Here is a CodePen with the invert CSS filter in action:

See the Pen CSS Filter Example — Invert by SitePoint (@SitePoint) on CodePen.

Blur

This filter applies a Gaussian blur to the images. It smudges the colors together and spreads them outside their edges. The radius parameter that you pass to this filter determines how many pixels on the screen blend into each other. Larger values will provide more blur. This filter can accept any of the length values except percentage.

img {
  filter: blur(1px);
}

Here is a CodePen with the blur CSS filter in action:

See the Pen CSS Filter Example — Blur by SitePoint (@SitePoint) on CodePen.

Opacity

This filter will make your images semi-transparent. The images will be completely opaque at 100% and fully transparent at 0%. This filter is similar to the well-known opacity property. One difference between these two is that of performance. The filter property is hardware accelerated on some browsers which can result in better performance.

img {
  filter: opacity(75%);
}

Here is a CodePen with the opacity CSS filter in action:

See the Pen Filter Opacity by SitePoint (@SitePoint) on CodePen.

Drop Shadow

As the name suggests, this filter adds a drop shadow effect to images. It is basically the blurred, offset version of the input image’s alpha mask drawn in a particular color that you provide. This property requires both the x and the y offset as well as the color of the drop shadow. You can also optionally provide a blur-radius value which will determine if the shadow will be sharp or blurry.

img {
  filter: drop-shadow(5px 5px 10px #666);
}

Here is a CodePen with the drop shadow CSS filter in action:

See the Pen Filter Drop Shadow by SitePoint (@SitePoint) on CodePen.

Url()

While all the filters we discussed up to this point are pretty useful, they are rather general purpose filters. Your project might require something more specific. If none of the filters above meets your requirements, you can create your own SVG filter and use its id to reference it using the url() filter.

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="greenish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0."/>
      <feFuncB type="linear" slope="2" intercept="-0.25"/>
    </feComponentTransfer>
  </filter>
  <filter id="bluish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="0"/>
    </feComponentTransfer>
  </filter>
</svg>

<style type="text/css">
img {
  filter: url('#greenish');
}
</style>

Here is a CodePen with a url() SVG CSS filter in action:

See the Pen CSS Filter Example — SVG by SitePoint (@SitePoint) on CodePen.

Combining and Animating Filters

You can also combine multiple filters together to get a variety of effects. Most of the time, the order of filters does not matter much, however, filters are applied in the order they are placed in your CSS and some filters will override others. For instance, using a sepia filter after a grayscale filter will result in a sepia image but using grayscale after sepia will produce a grayscale image.

Filters can also be animated. If you animate them properly, you can create some very interesting effects. Take the following code snippet as an example:

img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}

In the code above, multiple filters with different values are applied during the course of the animation. The final result can be seen in the demo below:

See the Pen Filter Animation by SitePoint (@SitePoint) on CodePen.

A sudden change in brightness and contrast with a full sepia at 50% creates a dramatic effect. The best way to get a better understanding of the concept is to try experimenting with your own filter animations!

Additional Notes

Even if a filter causes painting outside an element’s box model, it will have no effect on the geometry of that element’s box model. Keep in mind that filters affect all parts of target elements — this includes backgrounds, borders and text-decoration as well. You can also apply filters to videos and iframes as well. The following demo illustrates this concept. More examples are available on Bennett Feely’s website.

See the Pen CSS Filter Example — Maps by SitePoint (@SitePoint) on CodePen.

All these filters do pretty great, performance-wise — except for the blur filter which can be slow if your browser does not use hardware acceleration for it. The performance of the url() filter will vary based on the SVG filter you decide to apply.

The filter property is supported by all major browsers. Chrome and Opera require a prefixed version of this property to work. Filters are not supported by IE but Edge supports them partially. In this case, partial means that it supports all filters besides the url() version.

Conclusion

This guide explored the many CSS filters possibilities available to developers right now. They have good browser support, are easy to use and have better performance compared to canvas based solutions. Moreover, as I mentioned in the last section, you can use them in videos as well as with other elements.

Have you used any filters in non-conventional ways? We’d love to see it! Leave us a note below, along with any questions you might have.

  • Javier Tapia

    Very useful article! Thanks!

  • https://www.mypsdtohtml.com/ Mark Wilson

    Oops! Nice guide. Great explanation Gajendar Singh.

  • Kenneth Davila

    Bookmarked!

  • http://www.applegreenwebsites.com Stephanie Boucher

    One point: the animated filter doesn’t work in Firefox. Would have been good to include a paragraph on browser support. Otherwise great article!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.