022

Filters

Filters in CSS mean that you can apply effects you might only think possible in a graphics application. In this module, you can discover what is available.

The CSS Podcast - 023: Filters

Say you need to build an element that's got a slightly opaque, 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 combination of CSS filters and the backdrop-filter allow us to apply effects and blur what's needed in real time. Blur and opacity are two of many available filters, so let's have a quick run through what they all do and how to use them.

Take care when placing text over images, that the text is still readable should the filter effect not be supported in a user's browser. For example, at the moment backdrop-filter is not supported in Firefox, and so you should check that Firefox users aren't left with text they cannot easily read.

The filter property #

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

blur #

This applies a gaussian blur and 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 expressed as a percentage with the unchanged image being expressed as a value of 100%. A value of 0% turns the image completely black, therefore values between 0% and 100% make the image less bright. Use values over 100% to increase the brightness.

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

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, respectively.

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

grayscale #

You can apply a completely grayscale effect by using 1 as a value for grayscale(), or 0 to have a completely saturated element. You can also use percentage or decimal values to only 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 is on, the element's colors are completely inverted. You can also use percentage or decimal values to only 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, where 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: number or percentage. Instead of increasing or decreasing the brightness effect, saturate increases or decreases color saturation.

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

sepia #

You can add a sepia tone effect with this filter that works like grayscale(). The sepia tone is a photographic printing technique that converts black tones to 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 (equivalent to sepia(100%)).

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

hue-rotate #

You learned about how the hue in hsl references 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, changing the part of the color wheel it references. If you pass no argument, it does nothing.

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

drop-shadow #

You can apply a curve-hugging drop shadow 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 which contains space separated offset-x, offset-y, blur and color values. It is 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 allows you to 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 that the backdrop-filter property only applies the filters to the background, where the filter property applies it to the whole element.

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

Test your knowledge of filters

Which of following are CSS filter functions?

grayscale() invert() flip() multiply() blur() brightness()

๐ŸŽ‰

๐ŸŽ‰

Try again!

Try again!

๐ŸŽ‰

๐ŸŽ‰

Can CSS use SVG filters?

Yes No

The url() filter function enables this

Try again!