What is Glassmorphism and why you should care

How an outdated trend can still find space in your heart.

Maiane Gabriele

Published in

You don’t know this meme

5 min readJun 22, 2023

Yep! Glassmorphism IS ALIVE! And today, it’s all about glass 😎

But we are not talking about glasses, classes or that music from Pink about how we should Raise our Glass. It’s time to learn what Glassmorphism is.

By the way, if you know it and think this is a SUPER OLD, SAD, DEAD, DONE, PASSED AWAY TREND… You definitely need to continue reading.

What is Glassmorphism

What comes to your mind when you think about Glassmorphism?

Maybe some of the images below.

A dog with a glass of water. A woman with magnifying glasses. And another woman usign glasses. — Images from Adobe Stock.

The good thing is: YOU’RE NOT WRONG!

Glassmorphism is all about glass.

Mostly, it’s a Design trend where designers try to mimic glass.

It was super hot* four or five years ago. Everyone was creating a lot of screens just like that.

*Super hot: as a nerd I love that pun with super hot and glass, because that’s EXACTLY how glass is formed. But feel free to ignore me.

This style normally follows a few patterns:

Blurred background
White text over the background
Use of opacity
Reveals a few things that are behind the screen

And not less important: almost always, it completely ignores accessibility.

Examples of Glassmorphism. From MaiaMetivishvili1 and arpondas on Dribbble.

And by now you are probably thinking…

Why should I care about an outdated trend?

And here is the GOLD!

Apple just decided Glassmorphism is not outdated anymore. And when Apple decides something about design, a LOT of designers automatically decide to follow it.

Recently Apple announced the pretty new Apple Vision Pro.

Just in case you were as dead as Glassmorphism was during the last weeks…

Apple Vision Pro are these SUPER giant glasses. Some people also mentioned is also heavy. But it was awesomely presented in this super pretty Apple website with an impeccable storytelling that makes us feel like we need one of these right now.

A woman usign an Apple Vision Pro. — Screenshot from Apple Website.

Basically, these glasses are Apple’s promise on how to approach virtual reality. A new way to interact with the things we already do on our computers and smartphones.

Apparently, the only one who had enough money to buy one before launching was that bird from Sadia (a famous Brazilian brand where the bird was already using those glasses for YEARS).

What does Apple say about Glassmorphism?

At the same event Apple launched Apple Vision Pro they also started some talking about Spatial Design and the principles to create design for physical spaces. And here is where Glassmorphism joins us.

The “Spatial window”, part of the visual language presented by Apple, is entirely made using a “Glass material”. This way the user can interact with the interface and also see its surroundings.

Screenshot of the video Principles of spatial design, by Apple.

That said, Apple is encouraging people to use Glassmorphism as a way to create for the new virtual reality. The problem: even on the screenshot from the Apple video we can easily identify poor contrast between text and background. And here comes the one million question:

How can we build an accessible glass?

I dare to say it’s almost impossible to reach all the Web Content Accessibility Guidelines (WCAG)* criteria and still use Glassmorphism.

*Web Content Accessibility Guidelines (WCAG): the norms that define what is or isn’t accessible on the web.

On the other hand, it’s clear that this glass aspect can benefit users that want to both interact with a screen and its surroundings. In contrast, if the background were completely opaque it would be almost the same as using your regular computer, you just can’t see what is behind it.

So how can we follow both the new Apple Glassmorphism and accessibility?

A few adjustments can help:

Adaptative screens: The screen proposed by Apple adapts to light, which can help.
Add black with opacity: Using a small amount of black (or another dark color) over the common white background can help when using white text over it.
Give option: In the perfect world the user would be able to choose whether they want a glass effect or just a regular opaque background.

That is just the beginning. What is to come is still uncertain.

But if you want to learn more about it or listen to that Pink song I mentioned in the beginning, enjoy the next section. 🔍🔎🥛🍷🍸🥂🥃👓🫗🕶️