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'),
],
};
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?
Top comments (3)
I am in using tailwind css version
^2.1.1
and I didn't have to extend anythingYes Arnab, you're right. Tailwind 2.1 introduced first-party support of background-blur utility. So I updated the article with the new information.
Woow. It's really cool. Thanks for sharing!