Just as with every fashion, design trends come and go constantly. The biggest star at the moment is glassmorphism. As much as you (maybe) love neomorphism, glassmorphism is definitely taking over the design field. This article will give you a fundamental understanding of the new craze and teach you ways how to use it.
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.
5. Trends glassmorphism can be combined with
Gradients can be used as a part of the background. They must be in a similar color scheme, so that you get a smooth overflow.
You’ve probably noticed that geometric elements are used more than ever. They create a really playful and attractive look. Try adding them to your frosted glass design and you may be surprised by the end result! Just edit some simple shades with pen tool by changing up the border-radius or the colors.
3D designs have been one of the main trends for years. Their popularity is expected to grow even more now that VR and AR technologies are thriving. You can make a 3D element outstanding by using a glassmorphism overlay. You can also add different 3D elements in front of and behind the overlay. This will separate the plans clearly and give a clear space definition.
Time to go behind the glass
The creative job of the designer requires constant experimentation and exploration of new trends and techniques. Glassmorphism can make a website or an app look more attractive, when used in the right way. It can improve UI accessibility so much, that the navigation gets easier even for people with visual problems. Take the best out of glassmorphism by playing around with it and having fun!
Have you got an idea how you’ll use the frosted glass effect in your next design?