How to Create a Frosted Navbar with TailwindCSS

hey what's going on guys in this video i'm going to show you how to create a beautiful frosted nav bar effect with tailwind css it looks really good and if you want to see what it looks like the end just feel free to skip to the uh the final product at the end of the video but essentially this is just a little app that i'm working on here and we have this nav bar up top we've created it it's really pretty it's also like super sexy mobile responsive and all that fun stuff but assuming we have this nav bar how do we add kind of frosted functionality to it how do we provide that really cool kind of blur on the background tailin doesn't actually have an organic way to add blur to the background but we can just use a simple css property to kind of fix that up for us so we have this nav bar just really quickly walking you guys through it this is what the template looks like i'm using nuxt here which is a framework that uses view so if you guys are using just plain old html just kind of remove all these view uh remove the view file extension and then remove like this little template tag and it's basically the same thing anyway the very first and kind of parent div here the one that's kind of at the highest level of the hierarchy is this one we have a background of gray 900 and it's width full so it stretches across the entire width of the page if i wanted to i don't know make the background lighter i could simply add an 800 to that and you'll see the background would get a little bit lighter so that's just a little sanity check this is what we're working with inside of that we have another little nav class here this is with semantic html markup highly recommend you guys use that and that's just a little smaller container about this wide that just contains uh you know most of our navbar content and the reason why most people do something like this because they just don't want the navbar content to stretch across the full width of the container it usually looks a little bit better if it's constrained and it kind of lines up with the rest of your content but anyway let's say i wanted to make this a little bit smaller all i need to do is change that max with screen xl the max width screen lg so you can see how that lines up sorry my voice is a little hoarse i i'm just coming over a cold so hopefully it doesn't bother you guys too much but essentially how do we go from this to a beautiful frosted nap bar look well it's actually super simple first thing you have to do is you have to go to the parent container the one that contains your background color basically the thing that you want to make frosted and you have to add a background opacity um let's do 80 for now just to give you guys a brief look at what this does but basically you have to add this background opacity utility class and you can change whatever the opacity is by going you know 50 60 70 80 90 so on and so forth that one's really cool and it allows you to add an opacity layer just to that uh background rather than you know everything and that's how you go from what we had before let me just see if i can do this real time this to that so now we basically accomplished the first issue here and that first issue was how do we you know make the background a little bit translucent the frosting effect actually goes a little bit further than that though in order to add frosting we have to add another class here called bg clip padding and then let's add our own custom background filter class or like let's do blur filter actually i think i'm doing blur backdrop filter or something like that so let's just call it blur backdrop filter and now we're going to define that class elsewhere in our css so if you guys are doing this in you know like a simple html file you then you guys would have a style sheet or you guys could just do that at the top of the page in my case the way the view lays things out we do it a style tag down at the very bottom so i've actually already created the glass here i've called it backdrop filter but let's say i want to create a new class called blur backdrop filter i simply need to add these two specifications the first is backdrop filter and the second is i believe specific to i think that's mozilla firefox so it's not like a polyfill rather it's just like more functionality on different browsers because not all browsers support this natively in this case we have a 5 pixel blur but we can ramp up the blur if we want let's stick with five and let me show you guys what it looks like so we have that blur backdrop filter class on the main apparent div and then we have that style defined down here and this is what it ends up looking like if you guys pay careful attention to this you'll see that it actually blurs uh what passes in the background here right see that makes sleek social thumbnails quickly you can actually see that a little bit blurry let's say we want to make it a little more blurry let's say we do eight pixels you'll see that this will blur out even more typically for like a good frosted look i like something between like five maybe six let's do six uh and i've just found that to you know look the sexiest part of the appeal of a background that's frosted is you want people to be able to get that kind of like perspective or depth effect as they go down and in order to do that you still want to allow them to kind of make out the content at the back but anyway that is it guys i hope this tutorial was helpful just to summarize it's a bg opacity class a bg clip padding class and then you can make your own backdrop filter a blur class with these properties and you are good to go if you guys have any questions feel free to ask me in the comments section below i'm more than happy to help thanks so much and have a great rest of day