How to create a frosted glass effect with Tailwind CSS

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:

<div class="backdrop-blur bg-white/50"></div>

The 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).

The 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 0 and 100.

I’ve created a Tailwind Play sandbox that shows how you could use this effect for a nav bar.