How to implement Glassmorphism via HTML and CSS

Glassmorphism is a new design trend that uses a transparent background and a blur effect above the background to create a glassy effect. With the release of the Big Sur update for macOS, this was the first large-scale adoption of this design trend by a large company. Microsoft also uses this style in the Fluent Design System, but they call it “Acrylic Material” instead of Glassmorphism. You can use it for price cards, blog cards, profile cards, whatever you want.

Zoltán Szőgyényi

Co-founder at Themesberg. Web developer and investor.

You may be thinking – another design trend? Don’t we have them every year or so?

Last year we were introduced to neumorphism, which is still a fairly controversial trend that has never really been massively adopted. Reactions were mixed, some people really liked it, and others dismissed it outright.

But let’s talk a little more about glassmorphism.

What is glassmorphism?

Glassmorphism is a new design trend that uses a transparent background and a blur effect above the background to create a glassy effect.

Here is an example :

This is an example from a future glassmorphism-based CSS user interface library called ui.glass.

As you can see, the effect is used for the card which has the sample code on the right side, unlike the other card in the background.

Another example is this redesign of the Facebook Messenger app using glassmorphism for MacOS:

The redesign was done by Mikołaj Gałęziowski on Dribbble.

Glassmorphism is also used by Apple and Microsoft

This is another reason why this trend is probably not only passing, but here to stay. With the release of the Big Sur update for macOS, this was the first large-scale adoption of this new design trend by a large company.

Microsoft also uses this style in the Fluent Design System, but they call it “Acrylic Material”, instead of glassmorphism.

Here is what it looks like:

Okay, now that I’ve briefly introduced you to glassmorphism, let me show you how to apply this effect using only HTML and CSS.

To start

All you really need for this tutorial is a code editor and a web browser. You can also write this code using only editors, such as Codepen.

The element we’re going to build will look like this:

Let’s start by creating an HTML file with the following code:


<html lang="en">

  
  
  
  Glassmorphism effect

Great! Now let’s add a custom font style including Inter from Google Fonts:

"preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700&display=swap" rel="stylesheet">

Configure basic styles and background for the

body

label:

body {
  padding: 4.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
}

Good. Next, let’s create a new map element that we’ll use later to apply the glassmorphism effect on:

class="card">
    <h3 class="card-title">Glassmorphism is awesomeh3>
    A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    /ui.glass">Read morea>
div>

Of course, it could be any map element. You can use it for price cards, blog cards, profile cards, whatever you want.

Before we actually apply the glassy effect, let’s start by tidying things up with a few styles of spacing and size:

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}

Great! Now that we’ve laid the groundwork for the effect, let’s see how we can apply it.

Glassmorphism effect using HTML and CSS

You only need two important CSS properties to apply the effect: a transparent background and the

backdrop-filter: blur(10px);

Properties. The amount of blur or transparency can be changed according to your needs.

Add the following styles to the

.card

element:

.card {
	/* other styles */
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

But you might be asking, where is the effect? You don’t see it yet, because there is no shape or picture behind the card. Here’s what the map should look like right now:

Let’s add an image just after opening the

body

label:

class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">

Then apply the following styles to the

.shape

element using CSS:

.shape {
  position: absolute;
  width: 150px;
  top: .5rem;
  left: .5rem;
}

Impressive! The end result should look like this:

If you want the code for this tutorial, check out this codepen.

Browser support

One of the setbacks of this new design trend is that Internet Explorer does not support the

backdrop-filter

property, and Firefox turned it off by default.

Other than that, all major browsers support the properties needed to create the glassmorphism effect.

You can consult the support browsers on caniuse.com.

Conclusion

Hope this article has been helpful for you to better understand this new design trend and how the effect can be achieved.

Me and my friend from Themesberg have been working on a new CSS UI library that will use the new design trend of glassmorphism, called ui.glass. It will be open source under the MIT license.

You can sign up to receive progress updates and be notified when the project is launched. It will be available through NPM and also CDN.

Thanks for reading! Leave your thoughts in the comments section below on glassmorphism.