Navbar with background blur! Aesthetic look in 2 lines of code .

The 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 !

The Chrome Dev Tool you are missing : FEAT Recorder

Shrihari Mohan ・ Jul 31 '22

#javascript #webdev #programming #productivity

Two things that make my Terminal experience awesome 🚀 in Mac/Linux

Shrihari Mohan ・ Sep 18 '22

#productivity #javascript #linux #webdev

Struggling with finding colors and layouts for your web projects ? Check out these sites

Shrihari Mohan ・ May 1 '22

#ux #design #webdev #uiweekly

Comments

[Adam Crockett 🌀]

I used to make this effect by taking a screenshot of the page with html-to-canvas then setting that as the background of the navbar, making it skroll with the page then use js stack blur.. then filter came and I swapped to CSS partially, I waited years for this to drop it, came in to force a couple of years back... I'm old

[Shrihari Mohan]

Haha , yes sir ! You re old .. but uh html-canvas seems like a bit much.

[Adam Crockett 🌀]

100% it was a bit much, why I never used the effect in production, but the fact that I could way way before it was available that made me feel smart 🤓👍☕

[Shrihari Mohan]

We can do anything to make us feel smart. It's never bit much.

[Adam Crockett 🌀]

I think it's true you should flex, I made the mistake in my early career of mixing that flex with my actual job, simplicity is the way to productive work with achievable estimates

[Stefano Baccetti]

Awesome!🤩