How can I blur only the background image of a div block in Webflow without blurring the content inside it?

To blur only the background image of a div block while keeping the content inside clear in Webflow, you'll need to use the CSS backdrop-filter feature.

​

1. Set Up the Div Block and Background Image

• Ensure the div block has a background image assigned through the Style panel.
• Adjust the size and position of the background image as needed using the Background settings.

​

2. Use a Pseudo-element for Blurring Effect

• Webflow doesn't directly support CSS pseudo-elements in the designer, but you can use Custom Code to achieve this effect.
• Add a class to your div block (e.g., blur-bg-div).

​

3. Implement Custom CSS Code

• Access the Project Settings or Page Settings to add custom code.
• Use the following code to create and style a pseudo-element:

  ```css

  <style>

  .blur-bg-div {

    position: relative;

    overflow: hidden;

  }

  .blur-bg-div::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: inherit;

    background-size: inherit;

    background-position: inherit;

    backdrop-filter: blur(10px);

    z-index: -1;

  }

  </style>

  ```

• Adjust the blur amount (e.g., blur(10px)) according to your design needs.

​

4. Preview and Test

• Once you've added the custom code, preview your page to ensure the background image is blurred while the content remains unaffected.
• Adjust any CSS properties as necessary to fix layout or design issues.

​

Summary

By using a pseudo-element and CSS backdrop-filter, you can successfully blur only the background image of a div block in Webflow, without affecting the content inside. Adjust the custom CSS as needed to fit your particular design requirements.