How to create a frosted glass effect with Tailwind CSS
June 8, 2022
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.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects Iām working on.