Glassmorphism: The UI Design Trend You Need To Know About

1. What is glassmorphism?

Glassmorphism is a new UI design trend, which started growing in popularity in the end of 2020. Its main characteristic is the background separation it achieves by using transparencies and blurs. This way the effect resembles a frosted glass. It creates “through the glass” look and feel on the elements. The main reason why glassmorphism is being used is to establish a visual hierarchy and depth of the interface.

2. History of glassmorphism

Even though glassmorphism became popular last year, it has been around since 2013. It came to the world with Apple’s iOS 7 and their background blur.

Attention was brought back to it in November 2020 with the latest update of Apple – the MAC OS Big Sur.

Microsoft has also incorporated glassmorphism in their Fluent design system. They call it “The Acrylic” and describe it so: “Acrylic is a type of Brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.”.

3. Ways to achieve glassmorphism

The most important note you should have in mind when considering doing glassmorphism is to not overuse it. The effect looks best when used on only one or two elements! To achieve the most aesthetically pleasing look, choose a light and colourful background.

Setting the right transparency is key to the perfect glassmorphism vision. You shouldn’t make the entire shape transparent, only the fill. This way you will get the real background blur. If you do the opposite, you won’t get the desired effect.

The final touch you can add to spice things up is a 1p semi-transparent inner border. It will increase the glass-like effect and the object will show up even more. However, you can try different stylization and find what suits your UI design best.

4. What you should be careful of when using glassmorphism?

Glassmorphism looks pretty cool, but only when used in moderation. Adding it to too many parts of your UI may lead to accessibility issues due to their blur and transparency. The best practice is to add up to 2-3 glass elements. The latter can be background, buttons and icons.

- Be careful with the background

Make sure you’ve chosen the right background before applying glassmorphism. It is an essential part for getting the desired frosted glass effect. The background should have gradients, elements and more than one color, instead of being clear and monochrome.

Adding a shadow to the object, which you will use glassmorphism on, will result in the perfect “through the glass” look. However, the shadow’s saturation shouldn’t be overdone and black should be avoided. When using lighter background colors, add a shadow that’s only a few nuances darker and don’t forget to set the blending mode to “multiply”. If the background colors are darker and have dark gradient elements, add a lighter shadow to get a glow effect.

Just go over the different kinds of blending modes and see which one works best for your design! If you aim for lightening the background, use either normal, screen or overlay. If you are looking for a darker tone, multiply and darken are for you. The rest of the blending modes can be used for changing the colors’ nuances.