Create Glass Effect in CSS, Bootstrap, or Tailwind CSS

Create Glass Effect in CSS, Bootstrap, or Tailwind CSS

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.

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

glass effect in bootstrap

There is an MD Bootstrap tutorial that teaches you 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.

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

A glass effect in Tailwind CSS
.tw-glass {
  @apply bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-200
}

OR simply apply these classes:

@apply bg-white backdrop-blur-3xl bg-opacity-50

Play with Tailwind in Tailwind Play or read more on backdrop utility classes on the official site.

Add comment