Glassmorphism with Tailwind CSS Under 60 seconds

Quick guide on how to make glass morph components with Tailwind (updated for latest Tailwind version)

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:

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

1module.exports = {
2  theme: {
3    backdropFilter: {
4      'none': 'none',
5      'blur': 'blur(20px)',
6    },
7  },
8  plugins: [
9    require('tailwindcss-filters'),
10  ],
11};