How to provide glassmorphism with HTML and CSS


You might be thinking – well, here’s another design trend? Don’t we have them every year or so?

Last year, we got acquainted with neumorphism, which is still a rather controversial trend that has not become widespread. The reaction was mixed, some really liked it, and some did not like it at all.

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 on top of the background to create a glass effect.

Here’s an example:

This is an example from the glassmorphism based CSS UI library called ui.glass

As you can see, the effect is used for the card that contains the sample code on the right, as opposed to the other card in the background.

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

Redesign was done Mikołaj Gałęziowski at Dribbble.

Glassmorphism is also used by companies such as Apple and Microsoft.

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

Microsoft also uses this style in Fluent Design Systembut they call it “acrylic material” and not glassmorphism.

This is how it looks:

So now that I have briefly introduced you to glassmorphism, let me show you how you can apply this effect using only HTML and CSS.

let’s 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 like Codepen.

The element 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 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">

Setting up some basic styles and background for the tag body:

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

Okay. Next, let’s create a new card element, which we will later use to apply a glassmorphic effect:

<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 can be any element of the card. You can use it for price tags, blogs, profile cards, whatever you want.

Before applying the glass effect, let’s first tidy up some of the spacing and sizes of the 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 the foundation for the effect, let’s see how we can apply it.

Creating a glassmorphic effect using HTML and CSS

Only two important CSS properties are needed to apply the effect: transparent background and properties backdrop-filter: blur(10px); … The degree of blur or transparency can be changed depending on your preference.

Add to element .card the following styles:

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

But you are probably asking where is the effect? You can’t see it yet, because there is no shape or image behind the map. This is what the map should look like right now:

Let’s add the image right after starting the tag body :

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

Then apply the following styles to the element .shape using CSS:

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

Awesome! The final result should look like this:

If you need the code for this tutorial take a look at this the code

Browser support

One of the downsides of the new design trend is that Internet Explorer does not support the property backdrop-filterand Firefox turns it off by default.

Otherwise, all major browsers support the properties needed to create a glassmorphic effect.

You can check the browser support on the website caniuse.com

Conclusion

I hope this article was helpful to you and helped you understand more about the new design direction and how you can achieve the glassmorphism effect.

A friend of mine from Themesberg and I have been working on a new CSS UI library that will take advantage of a new direction of glassmorphism in design called ui.glass… It will be open source under the MIT license.

You can subscribe to receive progress updates and be notified when a project is launched. It will be available through NPM as well as CDN.

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


OTUS is now open to enrollment for an online course “HTML / CSS”

In this regard, we invite everyone to a free demo lesson “CSS Reset – An Unnecessary Artifact or a Life Buoy”… As part of the lesson, we will look at why you need a CSS Reset, what rendering is, and how the browser renders a page.

– Learn more about the course “HTML / CSS”

– Watch the webinar “CSS Reset – An Unnecessary Artifact or a Life Buoy”

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *