DEV Community

Cover image for Blur Background Using CSS
Hrushikesh Kokardekar
Hrushikesh Kokardekar

Posted on

Blur Background Using CSS

This Post is Inspired By Adrian Twarog

Blur Background in any website looks amazing and attractive to users. But ever wondered how this blur is made ? Well the answer is "Easy".

Let's See how to make it.

First we add an image in the background and then give our body as display-flex . To set the blur effect in the center of image we give justify-content and align-item as center .

Now the div on which we give blur effective is in the center of our page . to give the blur effect we use backdrop-filter and give it as blur . So that's it . Our blur is ready .

Let's see our blur effect.

Image description

Now to enhance the content inside the blur I've added more styling.

You can have a look on my code and practice it .

Image description

So that's it in this post . You can see how easy it is to make and blur background .

So meet you next post .
Till then Happy Coding ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘ฉโ€๐Ÿ’ป

Top comments (7)

Collapse
 
noisybrain profile image
noisyBrain

This is the first time I hear about blur property as well. I'm starting on web development, is an increible world!
Thanks for your effort!

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Thanks for reading my post

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

This is first time i have learned about backdrop CSS property, Thanks for this effort :)

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Thank I and will surely post more about such CSS properties

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

will wait :)

Collapse
 
suhakim profile image
sadiul hakim

๐Ÿ‘

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Thanks for appreciation ๐Ÿ‘๐Ÿ‘