DEV Community

loading...
Cover image for Glassmorphism with Tailwind CSS Under 60 seconds

Glassmorphism with Tailwind CSS Under 60 seconds

iamdavidlevai profile image Dávid Lévai Originally published at davidlevai.com Updated on ・2 min read

Glassmorphism is an ongoing trend right now in User interfaces. The new macOS, Big Sur brings a lot of it into the OS, and Microsoft has it for years with Aero UI, then later FluentUI.

To recreate this effect on the web, we only need a few css properties, but what if we want to use Tailwind?

Tailwind 2.1 Update

Tailwind 2.1 introduced first-party support of background-blur utility, so I'm back with a revision of this post.

The only classes you need to apply to your element right now:
bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-200

Here's the Play link for the updated code

Original article:

(Only read this if you are curious about how it worked before Tailwind 2.1)
If you prefer a quick 1 min video:


This article originally posted on Davidlevai.com blog.


We need these utility classes: bg-opacity-{xy}, bg-clip-padding, bg-{color}. We can add a little border and shadow to look better with these: border border-{color}, shadow-{size}.

And to completely recreate the effect, we should blur the background. We've got 2 options here:

1. Inline styles

Add a style property to the card div: style="backdrop-filter: blur(20px);".

You can access the full code here

2. Extend Tailwind

We can use Tailwindcss-filters to extend it and use backdrop-filter as a utility class.

Just yarn add tailwindcss-filters, then extend your tailwind.config file:

// tailwind.config.js
module.exports = {
  theme: {
    backdropFilter: {
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  plugins: [
    require('tailwindcss-filters'),
  ],
};
Enter fullscreen mode Exit fullscreen mode

And now you can use the backdrop-filter-blur utility class on your HTML.


Do you have any other quick & easy solutions to common things with Tailwind?

Discussion (3)

Collapse
arnabxd profile image
Arnab Paryali

I am in using tailwind css version ^2.1.1 and I didn't have to extend anything

<div className="bg-opacity-25 backdrop-filter backdrop-blur-lg">
....
</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
iamdavidlevai profile image
Dávid Lévai Author

Yes Arnab, you're right. Tailwind 2.1 introduced first-party support of background-blur utility. So I updated the article with the new information.

Collapse
ostap profile image
Ostap Bregin

Woow. It's really cool. Thanks for sharing!

Forem Open with the Forem app