TheLazy.Dev
Portfolio GitHub

Blog

glassmorphism |tutorial |css |html

Glassmorphism tutorial - learn how to implement the new design trend using only HTML and CSS

zoltanszogyenyi

Zoltán Szőgyényi

Posted on March 24, 2021

Glassmorphism tutorial - learn how to implement the new design trend using only HTML and CSS

There’s a new design trend emerging that you may have noticed if you regularly browse design related websites, such as Dribbble. Not only that, but it is also being used by well established brands, such as Apple and Microsoft. So what exactly is it?

Technically, it’s a transparent background with some added blur, shadow, and a light border color used for some card-like elements above a colorful background. This creates a more personalized look for the user interface, based on the background being used.

It’s called glassmorphism.

I don’t want to dwelve into the particularaties in terms of design, an awesome article on UX Collective has already extensively covered this, but I do want to show you how you can achieve this effect using only HTML and CSS.

So without further ado, let’s get started!

Choosing a background

The first thing to understand about glassmorphism is that not any type of background image or gradient will match. It is encouraged to use vivid colors, and using shapes and more simple backgrounds will be key to instead of very detailed images.

In this case, we’re going to apply a background gradient effect so that loading time will not be increased by an actual image.

Add the following styles to the <body> tag of the HTML file:

body {
    background: #edc0bf;
    background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
    padding: 4.5rem;
    margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

The first background property will be used as a fallback in case the gradient property is not supported by a certain browser, although most modern browsers already support it.

Let’s also use a better font style, such as Inter from Google fonts. Include the font by adding the following code inside the <head> tag:

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

Then proceed by applying the font family to the body tag in your CSS file:

body {
    /* other styles */
    font-family: 'Inter', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Creating a card element

Let’s start by setting up the HTML markup for the card that will actually have the glassmorphic effect. Let’s keep it simple by adding a title, description, and a link:

<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>
Enter fullscreen mode Exit fullscreen mode

Let’s add some basic styling to the cards and the elements:

.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;
}
Enter fullscreen mode Exit fullscreen mode

Glassmorphism card blank

Now it looks a little bit better, but as you can see there’s still no background. The reason for that is because I’m going to show you how to add the effect in the next section.

Adding the glassmorphism effect

Adding the effect is pretty straightforward by setting a semi-transparent background and using the backdrop-filter property to add a blur effect to the background. Add the following properties to the .card element in your CSS file:

.card {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
Enter fullscreen mode Exit fullscreen mode

Glassmorphism card in progress

Awesome! You’ll see that the background is now white and semi-transparent, but you may ask, where’s the glassmorphism effect?

Well, you can’t see it yet, because there’s nothing behind the element distinctive enough to create this. So we’re going to add a shape using a SVG image.

Add the following HTML markup:

<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
Enter fullscreen mode Exit fullscreen mode

Add the following CSS styles:

.shape {
    position: absolute;
    width: 150px;
    top: .5rem;
    left: .5rem;
}
Enter fullscreen mode Exit fullscreen mode

Glassmorphism card finished

Now you’ll see the full effect of glassmorphism with the more distinctive shape in the behind and the blur effect from the transparent card. Looks awesome!

As you can see, it can take quite a bit of work to properly position the design elements in order to achieve a good glassmorphism effect, but once you have it, it can look really unique.

The shape behind the element could be anything, theoretically at least. But it is preferred that they are shapes, or illustrations, mostly elements that are not too rich in detail.

Here’s a codepen example for the code in this tutorial if you want to play around with it:

See the Pen Glassmorphism effect by Themesberg (@themesberg) on CodePen.

Browser support

As web developers, we have a duty to make sure that the code we write is accessible to most of the browsers on the market. Most of the CSS properties that we have used in this tutorial are supported by all browsers, except for one: the backdrop-filter property.

Glassmorphism card in progress

It is not supported at all by IE 11, which to be honest, won’t matter too much in the coming years. With the arrival of Bootstrap 5, they also no longer added support for IE 11>, additionally, Microsoft announced that it will end support for IE 11 in August this year. So that shouldn’t concern us too much.

There is, however, another possible problem here. For some reason, Firefox doesn’t have the backdrop-filter property enabled by default, even though the browser supports this styling. We hope that in the near future this feature will be enabled by default.

You can read more about the browser support for the backdrop-filter property on caniuse.

So based on this, can the glassmorphism effect be used in production mode? Mostly, I’d say yes. The fact that the blur won’t work on a couple of browsers (3.76% for Firefox to be more exact), it doesn’t mean that the interface won’t look good enough for the minority of these browsers.

I wouldn’t necessarily use this for an enterprise level application where accessibility is an important requirement, but I would maybe use it for a personal or business website, even for some application interfaces.

Conclusion

I believe that glassmorphism is an interesting design trend and it can be definitely used in real life applications, however, there are some drawbacks when it comes to implementing it, as you need some designing experience, and there’s also a drawback with the Firefox default support, which may change in the future.

I hope that this tutorial helps you understand more about the new design trend and how to implement it to web interfaces. Before you, let me introduce you to a project that I’ve been working on with my colleague here at Themesberg. It’s called Glassmorphism UI.

Glassmorphism UI

Basically, we’re building a CSS UI library based entirely on the glassmorphism design principles, but in a way that it can be more easily used by developers who are not familiar with designing websites on their own. The project will be open source.

You can sign up for updates and be announced when the project is released at ui.glass.

💖 💪 🙅 🚩
zoltanszogyenyi
Zoltán Szőgyényi

Posted on March 24, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Glassmorphism tutorial - learn how to implement the new design trend using only HTML and CSS
glassmorphism Glassmorphism tutorial - learn how to implement the new design trend using only HTML and CSS

March 24, 2021