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!

The Chrome Dev Tool you are missing : FEAT Recorder

Shrihari Mohan ・ Jul 31 ・ 2 min read

#javascript
#webdev
#programming
#productivity

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

Shrihari Mohan ・ Sep 18 ・ 2 min read

#productivity
#javascript
#linux
#webdev

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

Shrihari Mohan ・ May 1 ・ 2 min read

#ux
#design
#webdev
#uiweekly