Lesson 29: Filters

Say you need to build an element with a slightly see-through, frosted glass effect that sits over the top of an image. The text needs to be live text and not an image. How do you do that?

A mix of CSS filters and the backdrop-filter lets you apply effects and blur what you need in real time. Blur and opacity are two of many filters you can use. So let’s have a quick run through what they all do and how to use them.

[!NOTE] Take care when you place text over images. Make sure the text is still readable if the filter effect is not supported in a user’s browser.

The filter property#

You can apply one or many of the following filters as a value for filter. If you apply a filter incorrectly, the rest of the filters defined for filter will not work.

blur#

This applies a gaussian blur, which is a soft, even blur. The only argument you can pass is a radius, which is how much blur is applied. This needs to be a length unit, like 10px. Percentages are not accepted.

.my-element {
    filter: blur(0.2em);
}

brightness#

To increase or decrease the brightness of an element, use the brightness function. The brightness value is written as a percentage, and the unchanged image is a value of 100%. A value of 0% turns the image completely black. So values between 0% and 100% make the image less bright. Use values over 100% to increase the brightness.

.my-element {
    filter: brightness(80%);
}

[!NOTE] You can also use decimal values instead of percentage values in filters like brightness. To set 80% brightness with a decimal, write 0.8.

contrast#

Set a value between 0% and 100% to decrease or increase the contrast.

.my-element {
    filter: contrast(160%);
}

grayscale#

You can apply a completely grayscale effect by using 1 as a value for grayscale(). Use 0 to have a fully colored element. You can also use percentage or decimal values to apply a partial grayscale effect. If you pass no arguments, the element will be completely grayscale. If you pass a value greater than 100%, it will be capped at 100%.

.my-element {
    filter: grayscale(80%);
}

invert#

Just like grayscale, you can pass 1 or 0 to the invert() function to turn it on or off. When it’s on, the element’s colors are completely flipped. You can also use percentage or decimal values to apply a partial inversion of colors. If you don’t pass any arguments into the invert() function, the element will be completely inverted.

.my-element {
    filter: invert(1);
}

opacity#

The opacity() filter works just like the opacity property. You can pass a number or percentage to increase or reduce opacity. If you pass no arguments, the element is fully visible.

.my-element {
    filter: opacity(0.3);
}

saturate#

The saturate filter is very similar to the brightness filter and accepts the same argument, a number or percentage. Instead of increasing or decreasing the brightness effect, saturate increases or decreases color saturation. Saturation is how strong or rich the colors look.

.my-element {
    filter: saturate(155%);
}

sepia#

You can add a sepia tone effect with this filter, which works like grayscale(). The sepia tone is a photographic printing technique that turns black tones into brown tones to warm them up. You can pass a number or percentage as the argument for sepia(), which increases or decreases the effect. Passing no arguments adds a full sepia effect, the same as sepia(100%).

.my-element {
    filter: sepia(70%);
}

hue-rotate#

You learned how the hue in hsl refers to a rotation of the color wheel in the colors lesson, and this filter works in a similar way. If you pass an angle, such as degrees or turns, it shifts the hue of all the element’s colors. That changes the part of the color wheel it points to. If you pass no argument, it does nothing.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow#

You can apply a shadow that hugs the shape of the content, like you would in a design tool such as Photoshop, with drop-shadow. This shadow is applied to an alpha mask, which makes it very useful for adding a shadow to a cutout image. The drop-shadow filter takes a shadow parameter that holds space separated offset-x, offset-y, blur, and color values. It’s almost identical to box-shadow, but the inset keyword and spread value are not supported.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Learn more about the different types of shadows in the shadows module.

url#

The url filter lets you apply an SVG filter from a linked SVG element or file. You can read more about SVG filters here.

Backdrop filter#

The backdrop-filter property accepts all of the same filter function values as filter. The difference between backdrop-filter and filter is what each one affects. The backdrop-filter property only applies the filters to the background, while the filter property applies them to the whole element.

The example right at the start of this lesson is the perfect example. You don’t want the text to be blurred, and ideally you don’t want to add extra HTML elements. Being able to apply filters only to the backdrop makes that possible.

Adapted from Learn CSS © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).