How to Create Frosted Glass Effect in Tailwind CSS

Last updated on May 8, 2022 Pennywise Loading... 3 comments

In Tailwind CSS, we can add a frosted glass effect (glassmorphism) to an element by using the backdrop-blur-{amount} utility. Besides, we need to set the background color with an opacity of less than 1. To do so, use bg-{color} and bg-opacity-{amount} classes.

Words might be confusing and boring. Please see the example below for more clarity.

Example

1. Create a plain webpage with an image background:

<body class="bg-cover grid grid-cols-3 gap-4 p-20"
    style="background-image: url(https://www.kindacode.com/wp-content/uploads/2022/05/green.jpeg)">
</body>

The purpose of using a green photo as a background is for you to see the frosted glass effect more clearly later.

2. Implement three cards that present frosted glass effects:

<body class="bg-cover grid grid-cols-3 gap-4 p-20"
    style="background-image: url(https://www.kindacode.com/wp-content/uploads/2022/05/green.jpeg)">
    <div class="w-72 h-72 bg-white bg-opacity-20 backdrop-blur-lg rounded drop-shadow-lg"></div>
    <div class="w-72 h-72 bg-white bg-opacity-40 backdrop-blur-md rounded drop-shadow-lg"></div>
    <div class="w-72 h-72 bg-white bg-opacity-50 backdrop-blur-xl rounded drop-shadow-lg"></div>
</body>

The final result:

You can find more information about backdrop-blur in the official docs.

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
3 Comments
Inline Feedbacks
View all comments
Niraj
Niraj
5 hours ago

thank you for this.

yasier
yasier
3 months ago

thank you so much for the blog. it was really helpful , keep it up bud

A Goodman
Admin
A Goodman
3 months ago
Reply to  yasier

thanks man

You May Also Like