Blurry Background in a Div Block

At a glance

The community members are discussing how to create a blurry background effect where the background image is half-blurred within a div block. One community member suggests having the image in a full-width container, with another container in front of it that covers half the height, and then applying a blur filter to the front container. Another community member mentions having a similar effect on their website, where a ball goes behind service cards that have a "blurry, glass effect". The original poster thanks the community and says they will try the suggested approach.

Useful resources

MMahetab ali

anybody here please tell me how i can make this blurry background
that background image should me half blur which is in div block

4 comments

MMedenko

there are usually many ways to do a certain future, but the first thing that comes to mind that you have the image in a container that is the full with of your screenshot and then you have another container, that's in front of it and it covers, half of the height. Than you set blur background filter on your front container, and that should be it. Tell me if this helped you in any way.

MMedenko

I have a mouse interaction on my website, that is set up similarly to this. If you visit it you can see how the ball goes behind the services cards and they have this blurry, glass effect to them.

https://thewebtailor.webflow.io/#services

MMahetab ali

thank you , let me try

MMedenko

Tell me how it goes

Add a reply

Community forum for knowledge and support

Blurry Background in a Div Block