Shrihari MohanThe one thing I always do when I begin a project is to add a navbar with background blur. Just got obsessed with it.
My Personal Website. View
PvZ2PlantsVsZombies
We will see how to do this in your website too! Just add this to your navbar container.
.bg-blur {
background: transparent;
backdrop-filter: blur(10px);
}
Code Review
background: transparent; - If you are having background color make sure you remove color and add this. This is what allows the background content to be visible on the navbar.
backdrop-filter: blur(10px); - This creates that smooth transition of navbar over background with that blur. Play with that values. 10px works good for me.
For more information. MDN Docs
Peace 🕊
If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.
You can make a drink Buttermilk 🥛. Small support comes a long way!
Subscribe If you want to receive these blogs in your mail from @Medium for free!
Try Our new product for free!
DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !
Using for a company ? Check out our pricing Just contact me for personalized pricing !
