New Design + UX trend of 2020
Glassmorphism
At hype4 we are proud to be at the forefront of the UI design industry. We had the privilege to not only follow, but also help create (or rather “name and define”) some design trends that went global.
One such example is Neumorphism — which I coined back in December of 2019 after going through potential 2020 design styles at our Design event DGS.
Last year’s neumorphism trend was horrible and awful. In 2020 I expected something even worse, but Michał Malewicz, the creator of the neumorphism style, wrote about something fresh and good-looking — glassmorphism style.
Hello, Glassmorphism
There is a new style on the block right now and it’s growing in popularity. While Neumorphism was imitating an extruded, plastic surface (but still looking like one layer), this new trend goes a bit more vertical. It’s most defining characteristics are:
- Transparency (frosted-glass effect using a Background Blur)
- Multi-layered approach with objects floating in space
- Vivid colors to highlight the blurred transparency
- A subtle, light border on the translucent objects.
Because of that glassy look, I believe the best way to call it is GLASSMORPHISM.
What is Glassmorphism?
In simple terms it’s a light or dark surface, placed on top of a colorful background. The colorful background is necessary for the effect to be properly visible, as dull, low-contrast backgrounds simply fade away under the panels and most of the effect is lost.
How it works?
The general idea is to have a background-blur on an object, giving the impression of a frosted glass. Contrary to Neumorphism, this style is not “connected” to the background, buy rather a series of glass panels floating in the vertical space.
That floating and some minimal translucency gives a sense of perspective of where each panel is in the 3d space. That gives some clarity and understanding of both the hierarchy and structure. It’s a series of clear layers that define where each object is in the 3d space.
Glassmorphism — The CSS Way
Glassmorphism is very easy to achieve for front-end developers. There is one main CSS property that we can use: backdrop-filter. This property allows you to apply multiple effects such as blur, sepia, and greyscale to the area behind your component.
<div class="basic">
<div class="blur"></div>
</div>.basic {
width: 200px;
height: 200px;
background: rgba(255,255,255,0.4);
position: relative;
}
.blur {
position: absolute;
bottom: 25px;
right: 162px;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(5px);
}
The image behind has straight background: rgba(255,255,255,0.4). The element above is a copy of the first one but with an additional backdrop-filter: blur(10px) property.
Glassmorphism 2021?
Apple introducing this style into Big Sur is a sure way that it will be emulated and imitated in the months to come. It probably won’t take over all the interfaces (and that’s good), but it is going to be a bit more popular than it is right now.
We, as humans easily get bored with a trend, and every few years the pendulum swings towards the other side. We used super-minimal, nearly-flat interfaces for a while, but then they started to get more colorful, more vertical and more “in your face”.
As designers we need to explore all the potential, creative ways of making a product. In some cases a limited use of “glass” will actually make the product look better and more attractive to the users.
And while I like my interfaces black & white with no decorations and super-high contrast, I am excited to play around with this style a bit more and see where it takes me.
Because in the end — design should be fun, as that’s the only way we can explore new paths, enjoy what we do, and deliver things that are truly exceptional.
See you on the other side of the glass!
