paint-brush
How to Implement Glassmorphism via HTML and CSSby@zoltanszogyenyi
5,638 reads
5,638 reads

How to Implement Glassmorphism via HTML and CSS

by Zoltán Szőgyényi
Zoltán Szőgyényi HackerNoon profile picture

Zoltán Szőgyényi

@zoltanszogyenyi

Co-founder at Themesberg. Web dev and investor.

April 11th, 2021
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

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.

Companies Mentioned

Mention Thumbnail
Apple
Mention Thumbnail
CodePen
featured image - How to Implement Glassmorphism via HTML and CSS
1x
Read by Dr. One voice-avatar

Listen to this story

Zoltán Szőgyényi HackerNoon profile picture
Zoltán Szőgyényi

Zoltán Szőgyényi

@zoltanszogyenyi

Co-founder at Themesberg. Web dev and investor.

Learn More
LEARN MORE ABOUT @ZOLTANSZOGYENYI'S
EXPERTISE AND PLACE ON THE INTERNET.

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:

image

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:

image

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:

image

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:

image

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:

image

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:

image

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.

image

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.

L O A D I N G
. . . comments & more!

About Author

Zoltán Szőgyényi HackerNoon profile picture
Zoltán Szőgyényi@zoltanszogyenyi
Co-founder at Themesberg. Web dev and investor.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Habr
Init0
Coffee-web
Unni
Hashnode
Learnrepo
Unni
Init0
Hashnode

Mentioned in this story

X REMOVE AD