A Short Guide on How to Create Glassmorphic Elements in Pure CSS

And an intro to glassmorphism

Albert Walicki
Nov 30, 2020 · 3 min read
a vivid, multi-coloured pastel screen on which part of the word “glassmorphism” is transparent
a vivid, multi-coloured pastel screen on which part of the word “glassmorphism” is transparent
Image credit: Author

Last year’s neumorphism trend was horrible and awful. In 2020 I expected something even worse, but Michał Malewicz, the creator of the neumorphism style, wrote about something fresh and good-looking — glassmorphism style.

Let’s take a look at it.

New Trend

Glassmorphism is a new trend which is getting more popular on services like Dribbble and Behance.

an example of glassmorphism applied to an app screen
an example of glassmorphism applied to an app screen
Courses Dashboard by Rudi Hartono

It’s characteristic features are:

  • transparency (frosted-glass)
  • vivid or pastel colours
  • light border

Glassmorphism — The CSS Way

Glassmorphism is pretty easy to achieve for front-end developers. There is one main CSS property that we can use: backdrop-filter. This property allows you to apply multiple effects such as blur, sepia, and greyscale to the area behind your component. Since it applies to everything behind the component, to see the effect, you must make this element at least partially transparent.

To create the glassmorphism effect, you should use backdrop-filter: blur().

<div class="basic">
<div class="blur"></div>
</div>
.basic {
width: 200px;
height: 200px;
background: rgba(255,255,255,0.4);
position: relative;
}
.blur {
position: absolute;
bottom: 25px;
right: 162px;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(5px);
}
two squares on a screen that have had the backdrop-filter: blur() property applied to them
two squares on a screen that have had the backdrop-filter: blur() property applied to them
Basic component

The image behind has straight background: rgba(255,255,255,0.4). The element above is a copy of the first one but with an additional backdrop-filter: blur(10px) property.

This is the simplest example of a new trend. But we can go even further. You can add, as recommended by Michał Malewicz, a border radius, white border, and a little bit more blur.

The last thing you can try is to add a 1px inner border with some transparency to your shape. It simulates the glass edge and can make the shape stand out more from the background.

<div class="basic">
<div class="blur"></div>
</div>
.basic {
width: 200px;
height: 200px;
background: rgba(255,255,255,0.4);
position: relative;
}
.blur {
position: absolute;
bottom: 25px;
right: 162px;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.2);
}
two squares that have had the backdrop-filter: blur() property applied to them, one with rounded corners and white border
two squares that have had the backdrop-filter: blur() property applied to them, one with rounded corners and white border
Rounded borders and white border

Glassmorphism 2021

I hope that glassmorphism will be trendy in 2021. I would like to see real apps built in this style or have a chance to build them on my own.

Play with my hero image on codepen.

Browser Compatibility

According to Can I Use, the property backdrop-filter is fully supported by Chrome, Safari, iOS, Android Browser, and Edge. Firefox is not supported by default but can be enabled.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Albert Walicki

Written by

Frontend developer, entrepreneur, biker. 👉 My Frontend book: www.frontendunicorn.com 👉 We build apps at www.hype4.com

Better Programming

Advice for programmers.

Albert Walicki

Written by

Frontend developer, entrepreneur, biker. 👉 My Frontend book: www.frontendunicorn.com 👉 We build apps at www.hype4.com

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store