CSS filters

The Webflow Designer lets you add one or more of any of the following filters to any element of your website, from images to videos to text, and adjust the effect's intensity.

The 8 CSS filters are: 

1. Blur

Applies a Gaussian blur to an element. Increase the radius value to make elements even blurrier.

2. Hue rotate

Adds a hue rotation to the selected element, adjusting an element’s colors based on the angle value: 0 degrees leaves the element untouched, while 180 will take you to the opposite side of the circle, and 360 will bring you back to square one. The maximum value is 1440 degrees, i.e., 4 times around the circle.

3. Saturation

Saturates the selected element to the degree defined by the amount value you select. The amount ranges from 0 to 100+, allowing for some super-saturated results.

4. Brightness

Lets you make an element more or less bright. A value of 0% turns an element completely black, while 100% leaves the element unchanged. You can take brightness beyond 100% too, for even brighter results.

5. Contrast

Adjusts the level of contrast in an element, where 0% equals completely gray, 100% leaves the element unchanged, and anything over 100% creates super-contrasted effects.

6. Grayscale

The easiest way to turn a color photo into a black-and-white masterpiece.

7. Sepia

Want to add a vintage feel to your site? Then Sepia’s the filter for you. Values range from 0% to 100%, so you can control just how vintage your images feel.

8. Invert

Inverts the color values in a selected image, with 0% leaving the image unchanged, and 100% creating completely inverted values.