Hi! I’d like to add blurred background to the whole website and I’m adding a div for each section.
It’s not working as it should because it creates this “dark” effect at the top and bottom of the viewport - when scrolling. Here’s the example (both sections should have the same off-white color but the blur effect makes it dark)
Are there any other better ways to apply blur to all sections? Or fix what’s happening here?
Thanks in advance for all help!
Hey @patryk.design,
Did you publish this effect to the site? The published site does not seem to have such dark background when scrolling through the sections.
That being said, if you want the noise background to be blurred, you can set the blur filter and explore if that gives you the visual you need and remove the separate blur div block.
That being said, it would be helpful to know how do you want the sections to look visually (like a screenshot of the design you expect), so that the community can help you out in suggesting some ways to achieve that.
Hi! Thank you for you reply!
Here’s a loom video with more details about what I’d like to acheive: Figma - VTG - Website Redesign (Copy) - Tentative Final - Desktop - 3 December 2025 | Loom
@patryk.design , could you please send a design link that you showed in video. thanks
There you go: https://www.figma.com/design/HCeJvML1tUnAd7LylZ3Oyg/Untitled?node-id=0-1&t=xGbyvmcR6A25nvSO-1
@patryk.design , It looks like the design wasn’t planned with the frontend implementation in mind, which makes difficult to develop.
Hey @patryk.design ,
The design you want to achieve might not require the blur effect as such. You can remove the blur effect and explore linear gradient properties to see what styling fits your requirement.
For example, this cloneable has some linear gradient enabled at the top section via CSS. This is not a replica of your design but the idea is the same, you would need to spend some time and take a trial & error approach to replicate the design with linear gradient styling properties for each section that needs the effect of fading the background color to the next one. If the default setting of Linear gradient that you are using is not enough, you can also apply custom CSS to get a close enough result.
Hope this gives you some idea.
Hello @patryk.design ,
That is a known behavior of using backdrop filter blur, when it comes out of the viewport it darkens, I think it has to do with how the browser handles the blending, it is specially noticeable in Chrome. So I would say that backdrop filter is not a good case for your sections, maybe you can achieve what you want just with regular blur or gradient backgrounds like @AJ_Dev mentioned. You could also make the backgrounds in Figma and export them as images. Now you could try keeping the blur as a fixed component, but then you will have to sandwich it between your content and your section backgrounds, not impossible, but time consuming. Good luck!
I know I can do linear gradient (even without CSS) in webflow. But the design doesn’t have linear gradient. Gradient elements are curved. Anyways thanks for help
Thanks for the answer! You gave me an idea to just create rounded div blocks, add filter blur and place them where the transition should happen. I need to do some work on this but it will be solved.
