Hi,
Is it possible to reach a similar result like this (CSS - Blurred Background - YouTube) in Webflow?
Sure, you can do that with CSS filters just like in the video. New feature: CSS filters | Webflow Blog
You will be able to do it easy in webflow for a full screen fixed image to get blurred in a smaller box.
Something like this:
To archive this you’ll need a full page div with a background image.
Place a div inside it, give it the desired size, and position Relative.
Then put two divs inside it, one will be the blur, the other will be for content.
The blur div, position Absolute and Fill. Give it the same background image as the parent, set it to Cover and Fixed. You can add another layer with black color with transparency to give it a nice effect.
Place any content in the other div.
(the blur div will get blurred at the edges as well, to fix it, I made the blur div a bit bigger than his parent div, positioned it in center and set his parent to Overflow - Hidden).
Here is a public share link so you can check it out.
https://preview.webflow.com/preview/blur-effect-e3aab0?utm_medium=preview_link&utm_source=dashboard&utm_content=blur-effect-e3aab0&preview=0e788404ef602a0ba7d916bb733a26f5&mode=preview
Thanks Eli11 for your help.
To resolve the issue with scrolling (for additional content below main section), I set background image for blur div as Not-fixed and a custom size (half of original size for width) and it worked! ^ ^
EDIT: with additional 100px reduction in width, the blur div will match the background perfectly. I am not sure if this is going to work with other background images.
1 Like
a div in a div with overflow hiddenn is enough. No need for the extra steps