Here’s an example of the “frosted glass” effect we’ll be creating using Tailwind CSS:
To achieve this effect, add the following Tailwind classes to a
<div class="backdrop-blur bg-white/50"></div>
backdrop-blur class blurs elements behind the
div. You can decrease the intensity of the blur by replacing it with a class like
backdrop-blur-sm, or increase the intensity using a class like
backdrop-blur-md (more options are in the Tailwind documentation).
bg-white/50 class sets the background color to white, but with 50% opacity. That has the effect of “lightening” the blurred content behind the
div. (Note that the
/50 syntax requires Tailwind v3.0+.) You can play with the opacity value by changing it to anything between
I’ve created a Tailwind Play sandbox that shows how you could use this effect for a nav bar.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.