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.
Now to enhance the content inside the blur I've added more styling.
You can have a look on my code and practice it .
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 👩💻👩💻👩💻