CSS filter effects

The CSS filter property is used to add visual effects to elements.

Play with the sliders to apply filter effects live to the image below.

Using filter effects

Have you ever hovered over a black-and-white or sepia image and the full-color image came into view instantly? Have you ever encountered a background image with a small blurred-out section that makes the text on top more legible? In the past, these manipulations required image editing software, time, and additional HTTP requests.

The Filter effects module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable.

The CSS filter effects module provides the filter and backdrop-filter properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create.

Filter effect properties

The two filter properties of the CSS filter effects module enable you to apply zero, one, or more graphical effects to an element:

Using the filter property, you can apply filter effects such as blur, drop-shadow, and sepia to an element before the element is rendered. The filters effects are applied directly on the element, including the element's contents, borders, and padding.

Using the backdrop-filter property, you can apply graphical effects to the area behind an element (the element's "backdrop"). The backdrop-filter property is often used to make the foreground content more legible, especially when the larger area on which the content is placed otherwise does not provide enough contrast for the content. The filter effects are applied only to the background of the element and not to the element's content.

The filter and backdrop-filter properties accept a space-separated list of filters, which are applied in the order declared.

Filter functions

The CSS filter effects module provides 10 functions, as well as the ability to define an almost endless array of effects using SVG filters applied via a url() reference.

Function Description

Example: Applying the sepia filter effect

If you hover over the sepia image below, you'll see the full-color image come into view instantly.

The image is set to be sepia by specifying the value of the filter property as the sepia() filter function. The filter is removed on :hover and :focus by setting filter: none.

HTML:

img class="bart-image" tabindex="0" alt="Baddie Bart" src="img/bart.jpg"/>

CSS:

.bart-image { filter: sepia(100%); max-width:max-content; height: 100%; } .bart-image:hover, .bart-image:focus { filter: none; }

In the img element, tabindex is set to 0 to enable focus without altering the tabbing order for keyboard users because img is not an interactive element.

Example: Applying filter effects to other elements

While generally applied to images, the filter and backdrop-filter properties can be applied to any element or pseudo-element.

In this example, a glow effect is added using a drop-shadow() filter with a 3px blur and 0 offset.

"Filters are a baddie’s best friend"

CSS:

h5 { color: rgb(9, 114, 117); filter: drop-shadow(0 0 5px magenta); font-size: 2rem; margin-top: 1.5rem;}