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

Share this article

CSS Filter Effects
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="https://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.

Frequently Asked Questions (FAQs) about CSS Filter Effects

What are the different types of CSS filter effects available?

CSS filter effects are a powerful tool that allows you to manipulate the rendering of an element before it is displayed on the screen. There are several types of CSS filter effects available, including blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Each of these effects can be used individually or combined to create unique visual effects on your web pages.

How can I apply a grayscale filter effect in CSS?

Applying a grayscale filter effect in CSS is quite straightforward. You can use the ‘filter’ property and the ‘grayscale()’ function. The ‘grayscale()’ function accepts a value between 0 and 1, where 1 makes the element completely grayscale and 0 leaves the element unchanged. Here’s an example:

img {
filter: grayscale(1);
}

Can I combine multiple filter effects in CSS?

Yes, you can combine multiple filter effects in CSS. To do this, you simply list the effects one after the other in the ‘filter’ property. For example, if you want to apply a grayscale and a blur effect to an image, you can do it like this:

img {
filter: grayscale(1) blur(5px);
}

How does the ‘brightness()’ function work in CSS filter effects?

The ‘brightness()’ function in CSS filter effects allows you to adjust the brightness of an element. The function accepts a percentage value or a number. A value of 0% will create an image that is completely black, 100% leaves the image unchanged, and values over 100% will make the image brighter.

What is the ‘drop-shadow()’ function in CSS filter effects?

The ‘drop-shadow()’ function in CSS filter effects allows you to apply a shadow effect to an element. The function accepts parameters for the horizontal and vertical offset of the shadow, the blur radius, and the color of the shadow. For example:

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

Can I use CSS filter effects on text?

Yes, you can use CSS filter effects on text. Just like with images or other elements, you can apply the ‘filter’ property to a text element to create various visual effects.

Are CSS filter effects supported in all browsers?

CSS filter effects are widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, they are not supported in Internet Explorer.

How can I use the ‘invert()’ function in CSS filter effects?

The ‘invert()’ function in CSS filter effects allows you to invert the colors of an element. The function accepts a value between 0 and 1, where 1 completely inverts the colors and 0 leaves the element unchanged.

What is the ‘hue-rotate()’ function in CSS filter effects?

The ‘hue-rotate()’ function in CSS filter effects allows you to adjust the hue of an element. The function accepts a degree value, which specifies how much the hue should be rotated.

Can I animate CSS filter effects?

Yes, you can animate CSS filter effects using CSS transitions or animations. This allows you to create dynamic visual effects that change over time.

Gajendar SinghGajendar Singh
View Author

Gajendar is a web developer with a keen interest in learning new things in web development. He has been developing websites for five years and occasionally writes tutorials on topics he feels confident about.

css blurcss filtercss filterslearn-advanced-csspatrickc
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week