How do I add a blur filter in Webflow?

Open Filters and choose Blur

Select the element you want to soften, such as a photo. Open Style panel, Effects, Filters. Click the plus icon, then choose Blur.

A larger blur radius increases the blur. A radius of 0 has no effect. Any filter you add or adjust is previewed on the canvas. Visitors see it after you publish the site.

Example: a portrait behind a testimonial should be slightly soft so the quote stays the focus. Select the image, add Blur, and raise the radius only until the face is still recognizable. Leave the quote's text element alone.

This is not the filter on a Collection list. A Collection list filter chooses which CMS items qualify. Effects, Filters changes how an element looks. If the list is showing the wrong posts, that is a different control.

Keep the blur off any text that must stay sharp

A filter changes the whole element, including its children. If you blur a section, the heading, the button, and the photo inside that section all blur together.

Put the blur on the image, or on a wrapper that holds only the image. Leave the words as a sibling, not a child of the blurred element. Then the photo softens and the sentence stays crisp.

The same rule applies to the other filters in that menu. Grayscale, sepia, and invert also cover the children. A section set fully to grayscale will turn the button label gray too. If the label must stay in color, the filter does not belong on the section.

Check the Navigator before you raise the radius. If the heading sits inside the element you selected, the heading will blur. Move the heading out, or select a smaller element, and set the filter again.

Use the same menu for color changes

Blur is one choice in Filters. The others start from the same plus icon:

• Brightness runs from 0 to 200%. 100% is the original brightness.
• Contrast runs from 0 to 200%. 100% is the original contrast.
• Hue rotate shifts the colors in degrees. 0 or 360 returns the original hue. Drag the dial, click it, use the arrows to move 45 degrees, or type an angle.
• Saturation runs from 0% to 200%. 100% is the original saturation.
• Grayscale at 0% shows the original image. 100% removes the color.
• Invert at 0% shows the original. 100% inverts the colors.
• Sepia at 0% is the original. 100% is fully sepia.

You can add more than one filter on the same element. The canvas previews them as you add or adjust them. Toggle a layer's visibility, and change the order, in the filter settings.

Example: a historical photo uses Sepia, then a small Blur. If the sepia is too strong, lower it or hide that layer with the visibility control. Do not put either filter on the caption. Color that is the only signal, such as a red error label, should not sit inside a grayscale parent.

Do not animate the blur

Animated blurs are very slow and are not recommended. Do not animate the blur radius to fake a hover. If the photo should look different only while the pointer is over it, set the filter on the Hover state instead.

You can add most of these effects on the hover state, or on another state, from the states menu. The hover guide is that menu. Choose None when you are finished so you are not still editing the hover styles.

A box shadow is a different effect. It adds depth around a card. The box shadow guide is the inside or outside shadow, including blur on the shadow itself. A filter changes the content of the element. A shadow does not blur the photo.

A backdrop filter is different again. It affects what shows through the transparent parts of an element, and you need some transparency before you can see it. Use Filters when the element's own pixels should change. Use a backdrop filter when you want the page behind a partly clear panel to change. Blurring the photo itself is the Filters control, not the backdrop.

Publish and read the words next to the image

The canvas preview is not the live page. Publish the domain you want to check, then open that page. Confirm the photo is the softened element, the heading is still easy to read, and a second image did not pick up the filter because it shares a class.

The filter follows the class. Name the class for the softened photo, not for every image on the site. If only one portrait should blur, do not put the filter on a class that sharp photos also use. Clear it there, add a class for the one portrait, and set Blur on that class.

On a phone width, confirm the blurred image is still the one you meant. A style set on desktop cascades down until you override it. If the phone should stay sharp, switch to mobile portrait and set the blur radius to 0 there. A radius of 0 has no effect, and that override does not remove the blur you set on desktop.

A blur on an image you already have is ordinary visual work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.