How can I blur only the background image of a div block in Webflow without blurring the content inside it?
TL;DR
- Use a pseudo-element (::before or ::after) to replicate and blur the background image within a div block using custom CSS in Webflow.
- Add the blurred effect through custom CSS in the Project Settings' "Custom Code" section and ensure content inside the div has a higher z-index to remain sharp.
Blurring only the background image of a div block in Webflow while keeping the content sharp can be a bit tricky. Here's how you can achieve that:
1. Use a Pseudo-Element
- Create a div block and set the background image on this div.
- Add a class to this div block (e.g.,
blurred-background). - Add a pseudo-element (::before or ::after) to this div using custom CSS in the Webflow Dashboard.
2. Add Custom CSS
- Go to Project Settings and navigate to the "Custom Code" section.
- Add the following CSS inside the
<style>tags in the "Head" code section:
```
<style>
.blurred-background:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: blur(10px);
z-index: 0;
}
.blurred-background > * {
position: relative;
z-index: 1;
}
</style>
```
- Publish the project to see the changes.
3. Structure the Div
- Ensure all content inside the div block is wrapped within the main div.
- Set the position of the main div block to
relativeto allow the pseudo-element to overlay correctly.
Summary
Blurring only the background image in Webflow involves using a pseudo-element which replicates the background and applies a blur filter, while the content remains crisp with an adjusted z-index.