How to Create a Frosted Navbar with TailwindCSS
Show notes
Looking to create a beautiful frosted navbar with TailwindCSS? Lucky for you, Tailwind makes it incredibly easy to get started.
Uploaded 28-02-21
It takes maybe 30 seconds tops:
1. Add a bg-opacity utility class to the parent div to make navbar transparent. I used bg-opacity-80 in this video, but you can use whatever level you'd like.
2. Add a bg-clip-padding class to the parent div to constrain the blur effect.
3. Create your own custom CSS class (I called mine blur-backdrop-filter, for instance) that includes a backdrop-filter: blur(6px) property. You can change the pixel value to whatever you'd like - higher means a stronger blur (more frosting), and lower means a weaker blur.
Hope that helps!
Learn more about your ad choices. Visit megaphone.fm/adchoices
Learn more about your ad choices. Visit megaphone.fm/adchoices