In this tutorial, we will see how to create the glass effect in CSS, Bootstrap, or Tailwind CSS.
CSS can simulate frosted glass or glass blur on web pages. I’ll show you the methods in this article.
Table of Contents
Demo of glass effect
Glass Effect in CSS
The above effect is created in CSS using backdrop-filter. It will be visible if you add a background image or color. You can set a gradient to highlight the glass effect.
.inner_div {
background: #ffffff33;
border-radius: 10px;
box-shadow: 0 4px 30px #0000001a;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
Sometimes you may face poor browser support for backdrop-filter property then you can use the filter: blur(); to achieve the same effect in CSS.
.inner_div {
...
box-shadow: inset 0 0 2000px #dbdbdb80;
filter: blur(1px);
...
}A glass effect in Bootstrap
There is an MD Bootstrap tutorial that teaches to create an animated card with Bootstrap 5 & Glass Effect.
You can achieve this by using opacity-[value] and custom CSS classes. There is Tailwind which is the utility-based framework. You can easily create a glass effect in Tailwind CSS.
Read more: Design credit cards in Tailwind CSS
A glass effect in Tailwind CSS
We simply need a few CSS properties to replicate this effect on the web, but what if we want to use Tailwind?
Right now, the only classes you need to apply to your element are: bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-200
.tw-glass {
@apply bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-200
}
Play with Tailwind in Tailwind Play or read more on backdrop utility classes on the official site.
