Design and Develop Glassmorphism Effect

Glassmorphism is a design trend that creates a glass effect for the background using transparent background and blur effect. The Big Sur update for Mac OS adopted the use of this effect in the UI.

In this article, we can design the glassmorphism effect in Figma and develop it with TailwindCSS.

Designing Glassmorphism in Figma

The glass effect looks good only when we place it over a background with different colors, only then will the blur effect be prominently visible.

So, before creating the element with glassmorphism effect applied to it create a background with some shapes with different colors. I went with a background color of #D8E5F6 and 2 circles of colors #60B2E0 and #BE73E1.

Then create a shape of your desire on which we want to apply the glassmorphism effect. I went with a rectangle with curved edges. Give it a color of white(#FFFFFF) and Opacity: 70%.

Next, let's bring in the glass effect. For this add background blur as the effect for the element and a blur value of your preference. I gave Blur: 30 in my design. The design is done and will look as below:

Developing Glassmorphism with TailwindCSS

Next, let's move on to the development of this effect with TailwindCSS. Choose an apt background. I used some shapes just like the design. Then create a div of any dimensions. Give it a background of white and an opacity of 70% with the class bg-white/70.

Then to bring in the blur effect we should use the backdrop-blur class. backdrop-blur class is a backdrop-filter that applies blur to the background. It can take a range of values as below:

• backdrop-blur-none: backdrop-filter: blur(0);
• backdrop-blur-sm: backdrop-filter: blur(4px);
• backdrop-blur: backdrop-filter: blur(8px);
• backdrop-blur-md: backdrop-filter: blur(12px);
• backdrop-blur-lg: backdrop-filter: blur(16px);
• backdrop-blur-xl: backdrop-filter: blur(24px);
• backdrop-blur-2xl: backdrop-filter: blur(40px);
• backdrop-blur-3xl: backdrop-filter: blur(64px);

You can also have arbitrary values like backdrop-blur-[5px].

IMPORTANT NOTE: backdrop-filter is not supported on Firefox by default(https://caniuse.com/css-backdrop-filter).

The final code should look as below:

<div class="bg-[#D8E5F6] flex items-center justify-center w-full h-full min-h-screen absolute">
  <div class="absolute top-60 left-20 w-72 h-72 rounded-full bg-[#60B2E0]"></div>
  <div class="absolute bottom-60 right-20 w-72 h-72 rounded-full bg-[#BE73E1]"></div>
  <div class="absolute bottom-80 left-80 w-96 h-56 rounded-xl flex items-center justify-center text-4xl font-bold text-[#1E84EA] backdrop-blur-[5px] bg-white/70">GLASSMORPHISM</div>
</div>

To achieve this result:

With these classes, you can bring the glassmorphism effect to your website. You can use this effect on the sidebar, navbar, login page cards, context menus, etc.