If you think you haven’t heard of glassmorphism, I’ll hazard a guess that you’ve seen it at some point already today! As the name heavily implies, this UI design trend ultimately takes inspiration from…you guessed it, glass.
If you have an iPhone, just take a quick look at the folders around your apps. If you’re using Windows, have a peruse of some of the UI elements on your screen right now. Can you see a frosted glass effect anywhere? Yes? There you go, that’s glassmorphism.
So, What Are the Qualities of Glassmorphism?
With the term only coined back in 2020, the concept of the background blur was first widely introduced in 2013 with iOS 7.
“That verticality and the fact you can see through it, means users can establish hierarchy and depth of the interface. They simply see which layer is on top of which, just like pieces of virtual glass.Because of that glassy look, I believe the best way to call it is glassmorphism.” – Michal Malewicz
Common characteristics of glassmorphism include:
- Translucency (like frosted glass using a background blur)
- A subtle, light border around the glassmorphic object
- Vivid colors
- Multi-layered approach
- Objects floating in space
A Brief History of Glassmorphism
Remember the skeuomorphism trend? It began to take shape in the 1980s, and is a technique that favors mimicking real objects in the digital world.
The original UI for Apple’s iBooks on the iPad is a common example. Especially in the earlier days of the web when much of the population wasn’t quite as used to technology filling every corner of our lives, skeuomorphism almost showed us how to engage with our screens by recreating common objects that are familiar to us in the real world.
Although less popular now than back in the day, the trend is by no means dead. Just take a look at the trash can on your computer, for example.
Glassmorphism took skeuomorphism and shook it up.
Whereas a skeuomorphic approach to glass would be to recreate the exact look (perhaps with window sills, window baskets, and panes to encourage the user to click to open), glassmorphism recreates the feeling of glass. The user would not be at risk of thinking they are seeing a real panel of glass on their screen, but a clear digital expression of the physical object.
Why Use Glassmorphism in Web Design?
- Ultimately, it’s a useful technique for adding visual hierarchy to your designs, meaning you can encourage the user to focus on important areas of the UI.
- It can make the layout look more attractive.
- It’s versatile—this technique could be used across pretty much any industry!
- It can make sites or apps easier to navigate.
- It’s a modern evolution of previous trends.
Tips for Introducing Glassmorphism to Web Design
- Contrast: Make sure you apply enough contrast with the cards and the interface so it’s accessible and easy to use or read. To make sure the design is accessible, the objects on screen should be able to function without the background.
- Transparency: Set the correct transparency, i.e. you don’t want to have a completely transparent object (it defeats the point!) but you also want to be able to see a hint of what’s happening beneath the glassmorphic object.
- Background: Pick the right background—the best glassmorphic effect can come when the backgrounds are not too simple or too cluttered. Picking a muted but colorful background can be a good option here.
- Time: If you’re building from scratch, make sure you give yourself enough time to experiment. Because of the gradients and transparency, there’s a fine line between glassmorphism helping and hindering the user experience. Make sure you’re on the right side!
Over to You!
Think glassmorphism could be a useful technique for your next web design project? Pick one of my favorite templates or head over ThemeForest to choose your own.