Fun with CSS Filters

If you ever wanted to apply PhotoShop or Instagram style effects to images on your website but sighed at the thought of firing up PhotoShop to edit all those images by hand, CSS filter properties just might have you covered.

Choose from a variety of effects such as blur, sepia, or brightness and let the browser do the magic on your images, vector illustrations, or text. And, unlike a permanently applied filter on your source image, CSS filter effects can be animated and tied to user interactions like hover or click.

The Properties

CSS filter properties have been supported across most modern browsers since around 2016. The full list for filter: includes:
none (the default), blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and url().

How to Use

The syntax is a little different from most CSS properties in that you use a function to designate the filter effect. Just like calling a function in JavaScript, when defining your filter property you use the name of the effect followed by a pair of parentheses. Within the parentheses, you enter one or more parameters to control how the particular filter displays. Let’s walk through this with the grayscale filter.

.bio-photo {
  filter: grayscale(50%);
}

For this particular filter, you are setting the grayness of the image anywhere between 100% (a black-and-white image) and 0% (zero percent grayscale or unchanged). You may leave the value in parentheses blank, which is the same as 100% grayscale. Or you may use decimals to set the value. For example, grayscale(0.25) is the same as grayscale(25%).

The other filters follow a similar pattern, each taking its own parameters that let you fine-tune the result.

See the Pen CSS Filter examples by Kristi Dugan (@kristidugan) on CodePen.

Multiple Filter Effects at Once

It is also possible to use more than one filter within a single filter definition like this:

.super-cool-combo {
  filter: brightness(150%) saturate(2.0);
}

That's Cool, But Why?

What are some good use cases for CSS filters? Perhaps you have a CMS or blog with multiple contributors and the visual design calls for all the author bio photos to be black-and-white with a 45-degree drop shadow. Depending on technical expertise, asking your authors to do this themselves probably wouldn’t give you uniform results. Instead of creating an extra step and asking a designer to edit the photos, your CSS can do it automatically!

What if then the design changes and sepia bio photos are all the rage? A simple change in the CSS file will change the design sitewide, no image editing necessary.

In cases where you have images with areas of transparency, such as a .png or SVG graphic, filters like drop-shadow will follow the shape of the image rather than the box. See the difference between box-shadow and filter: drop-shadow() below.

See the Pen CSS Shadow examples by Kristi Dugan (@kristidugan) on CodePen.

And lastly, animations are where CSS filters can really shine. Try applying a filter to the hover state of an image or button, and use transition to give smooth timing.

Some Final Tips

CSS filters are not supported in Internet Explorer, so make sure that your design degrades gracefully. The blur and drop-shadow filters require a little more processing power from the browser, so don't overdo it on these effects depending on your anticipated end users.

If you want an easy way to apply interesting visual effects while only loading one image from the server, CSS filters can make that happen. I hope this article has whet your appetite for CSS image effects or even animations. Go more in depth and learn more with the resources below.

Resources

• CSS Tricks - filter
• Codrops - filter
• W3 Schools - CSS Filter Property
• Can I Use - CSS Filter
• HTML5 Rocks - Understanding CSS Filter Effects