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.
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