5,337 reads

How to Implement Glassmorphism via HTML and CSS

by Zoltán SzőgyényiApril 11th, 2021

Too Long; Didn't Read

Glassmorphism is a new design trend that makes use of a transparent background and a blur effect on top of the background to create a glassy effect. With the release of the Big Sur update for MacOS, it 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 pricing cards, blog cards, profile cards, anything you'd like.

featured image - How to Implement Glassmorphism via HTML and CSS

You might be thinking - another design trend? Don't we have these every year or so?

Last year we got introduced to neumorphism, which still is quite a controversial trend that never really got massively adopted. Reactions were mixed, some people really liked it, and some others downright rejected it.

But let's talk a bit more about glassmorphism.

What is glassmorphism?

Glassmorphism is a new design trend that makes use of a transparent background and a blur effect on top of the background to create a glassy effect.

Here's an example:

This is an example from an upcoming CSS UI library based on glassmorphism, called ui.glass.

As you can see, the effect is being used for the card that contains the code example on the right side, in contrast with the other card in the background.

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

The redesign was made 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 just passing by, but it is here to stay. With the release of the Big Sur update for macOS, it 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's how it looks:

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

Getting started

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 that we're going to build will look like this:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect</title>
</head>
<body>
    <!-- code goes here -->
</body>
</html>

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

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

Set up some basic styles and a background for the

body

tag:

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

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

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

Of course, this could be any card element. You can use it for pricing cards, blog cards, profile cards, anything you'd like.

Before we actually apply the glassy effect, let's first tidy things up with some spacing and sizing styles:

.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 down the foundation 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 based on 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's the effect? You don't see it yet, because there is no shape or image behind the card. This is how the card should look like right now:

Let's add an image just after the opening of the

body

tag:

<img 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;
}

Awesome! The final result should look like this:

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

Browser support

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

backdrop-filter

property, and Firefox has it disabled by default.

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

You can check out the support browsers on caniuse.com.

Conclusion

I hope that this article was helpful for you to understand more about 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 be using the new glassmorphism design trend, called ui.glass. It will be open source under the MIT license.

You can sign up to get updates about progress and be notified when the project will be launched. It will be available via NPM and also CDN.

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