Visual Effects in CSS: Filter Effects

With filter effects , we can blur objects, change them from full color to grayscale or sepia tone, modify their hue, and invert their colors. As with blend modes, CSS filter effects can be used with HTML or SVG documents. Most examples in this section use HTML elements.

Filter effects have two parts:

  • filter primitives, which are SVG tags that must be used as children of the SVG filter element
  • filter functions, which are used with the CSS filter and backdrop-fiLter properties

Most filter functions have a filter primitives equivalent, but not every filter primitive has and equivalent filter function. We’ll focus on filter functions in this section, since they’re most applicable to CSS.

Filter functions can be used with the filter or backdrop-filter properties. The filter property affects foreground elements, while backdrop-filter affects the layers behind the element to which it’s applied.

You’ll see examples of both in this section. First, let’s meet the filter functions.

1. Meet the CSS Filter Functions

There are 12 filter functions, each of which has an SVG filter primitive counterpart. Both filter and backdrop-filter accept these functions as part of their filter function list. The table below shows how each filter function affects the following photograph.

Keel-billed toucan photo by Zdenek Machacek from Unsplash

Filter functions can be used alone or in combination. For instance, we can combine the sepia and drop shadow filters:

img {

filter: sepia( 1 ) drop-shadow( 3px 3px 8px #0da8cc );

}

This creates the effect shown in the image below.

I should probably mention here that the drop-shadow() function works differently from the box-shadow property, despite its similar syntax. Firstly, the drop shadow filter doesn’t accept a list of shadows. Passing a shadow list, as in the example below, won’t work. The browser will ignore your entire filter rule:

div {

/* Unsupported. Will not work */

filter: drop-shadow(0px 0px 3px #0c0, -2px -2px 3px #333 );

}

Secondly, the drop-shadow function, as the specification explains, is “a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image”. In other words, when a layer contains transparent areas, the drop shadow filter follows the contours of the transparency. It doesn’t create a shadow for the element’s box.

The image above illustrates this difference. In both cases, these images are PNG images with 100% alpha transparency. The image on the left uses filter: drop-shadow() , and the shadow follows the shape of the lemon. In the image on the right, the shadow follows the dimensions of the image.

2. Using backdrop-filter

Where filter affects foreground elements, backdrop-filter affects elements or layers that sit behind the element to which backdrop-filter is applied. This can be a layer created using background-image , or a positioned sibling element.

Browser support for backdrop-filter is less robust than for filter . Major Chromium-based browsers—including Chrome, Edge, Opera, and Samsung Internet-support it by default. However, Safari still requires a –webkit– prefix (such as -webkit-backdrop-filter ).

Firefox supports backdrop-filter without a vendor prefix. At the time of writing (and confirmed in Firefox 91 and below), that support is still considered experimental and needs to be enabled. To tinker with this feature in Firefox, edit your about:config settings and change the Layout.css.backdrop-fiLter.enabLed and gfx.Mebrender.aLL settings to true .

In the image below, we see a paragraph with backdrop-fiLter applied. The backdrop-fiLter property affects the background image layer, not the paragraph itself.

Flamingo photo by Alejandro Contreras from Unsplash.

Take a look at the flamingo image above. Notice that the area of the flamingo that sits beneath the pink-colored box is both blurred and blue, but the text isn’t. Here’s the CSS to create that effect:

div {

background-image: url(‘flamingo.jpg’);

background-size: contain;

width: 600px;

height: 600px;

display: flex;

align-items: center;

justify-content: center;

margin: auto;

}

p {

margin: 0;

align-items: center;

padding: 6rem 2rem;

/*

* Set a background color as a fallback.

*/

background: hsla( 22.4, 44.9%, 63.7%, .9 );

}

@supports (

( backdrop-filter: blur( 8px ) hue-rotate( 180deg ) ) or

( -webkit-backdrop-filter: blur( 8px ) hue-rotate( 180deg ) )

) {

p {

/*

        • Undo the background color. The initial value of ‘background-color’ is
        • ‘transparent’.

*/

background-color: initial;

backdrop-filter: blur( 8px ) hue-rotate( 180deg );

}

}

In order for backdrop-filter to work, the top layer needs to be at least partly transparent. If you use a background color, it should have an alpha transparency value of less than 1 (such as hsla(300, 100%, 50%, .5) or #636a ). A transparent background color, as shown here, also works.

Firefox doesn’t yet support background-filter by default. Adding a background color to p prevents the text in this example from becoming unreadable in Firefox and older versions of other browsers. How did I arrive at hsla(22.4, 44.9%, 63.7%, .9) ? First, I used the eyedropper tool of an image editor to select a pixel color ( hsl( 202.4, 43%, 64.9%) ). Next, I subtracted 180 degrees to match the hue-rotation value (202.4 – 180). Lastly, I adjusted its transparency. This gives us a fallback effect that’s similar to our backdrop filter, as shown in the image below.

Don’t forget to set a fallback when using backdrop-filter , particularly if you’re layering text on top of an image.

Wrapping the backdrop-filter rule set in an @supports block lets us undo the background color only if the browser supports the backdrop-filter property.

3. How Filter Effects Affect Layout

As with transform and opacity , filter turns the element to which it’s applied into a containing block when its value is something other than none . It also creates a new, local stacking context. The image below shows the same markup before and after a filter: hue- rotate(45deg); declaration is added to the <div> element.

Using filter still creates a containing block and stacking context, even if the value of the filter property doesn’t create a change in the element’s appearance. In other words, div {filter: blur(0px);} would have the same impact on a layout as filter: hue- rotate(45deg) , but wouldn’t change the color of the elements.

The backdrop-fiLter property works similarly. Adding backdrop-fiLter to an element contains its absolute and fixed positioned descendants. But it doesn’t affect the stacking context of the element or elements that comprise the backdrop.

So far, we’ve covered blend modes and filter effects. We’ll close out the chapter by looking at two more effects: clipping and masking.

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

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