Using CSS filters

CSS filters give you a powerful way to apply a wide array of visual effects to elements on your website, including images, background videos, even text. They’re like a photo editing tool — but in your browser. With CSS.

To start using CSS filters in Webflow, open the Style panel, look for Effects, then Filters.

Filter Types

In Webflow, we break these filter types out into three categories:

1. General
2. Color Adjustments
3. Color Effects

General

Under General, you’ll find the Blur effect, which is handy when you’re trying to make overlaid text easier to read.

Color Adjustments

This type contains effects that alter the color of an element (or group of elements, if applied to a parent element), and includes:

Hue Rotate

This will adjust the hue of the image, in turn affecting both the brightness and intensity of the three primary hues of red, green, and blue.

Saturate

Saturation is defined as the intensity of color. Adjusting the saturation would in turn intensify or dim the color intensity of your element.

Brightness

Instead of using an overlay, you could simply adjust the brightness of an image (or other element) to dim it.

Contrast

Increasing or decreasing the contrast alters the separation between dark and bright areas of the element.

Color Effects

The Color Effects let you directly alter elements’ colors, naturally enough.

Grayscale

Adjusting the Grayscale value lets you take an image from full-color to black-and-white.

Sepia

Sepia adds a dark reddish-brown color (reminiscent of old photographs) to your image or element. You can adjust from full Sepia (which will add that darker, reddish-brown tint), to 0 Sepia, which will utilize the original color.

Invert

Inverting the colors of an element transforms the element’s darkest parts into the lightest parts and vice versa.

Using CSS filters with interactions

CSS filters are particularly handy for interaction design. Because this is a CSS attribute, you can add a filter when someone hovers over an element on a page to indicate its interactivity.

For example, you could add an effect to a button that takes it from greyscale to full color on hover.

Or you could throw in an Easter egg: a secret message that can only be seen on hover. Just add a filter to the static text that removes the Blur effect.

The possibilities are endless!