If you like to keep your fingers on the pulse of the latest web design trends, you’ve probably already heard of Glassmorphism. Eye-catching and colourful, this trend favours transparency and multi-layered approaches. Designed to resemble milky glass surfaces, it has caught a lot of attention.
Just like its cousin Neomorphism, which was all the hype last year, it shines bright - when applied correctly! Here is what you need to know before you start using this UI design trend!
What is Glassmorphism?
There is a new kid on the block (or should we say returning to the block) that is rapidly gaining popularity. Vividly coloured backgrounds, frosted-glass effects and seemingly translucent objects floating in space, the UI trend appropriately dubbed ‘Glassmorphism’ pushes and bends boundaries. And we can’t wait to explore it with you!
Glassmorphism is a term used to describe UI design that emphasises light or dark objects, placed on top of colourful backgrounds. A background-blur is placed on the objects which allows the background to shine through - giving it the impression of frosted glass.
Elements to the Glassmorphism Aesthetic
HYPE4 describes it as a “series of glass panels floating in the vertical space” and we think that’s very fitting. The effect is created on the base of a composition made of transparency, layers, vivid background colours and shadows.
Transparency
The frosted-glass effect is achieved by using background blur. This adds depth to the design and establishes verticality. The blurring of objects gives the layout a sense of perspective, almost as if they were floating in 3D space.
Multi-layered approach
With objects floating in space, the layered interface maintains a clean look that’s easy on the eyes. This style works best with one or more transparent layers on a bright, colourful background.
Vivid colours
The background colour plays an essential role. To highlight the blurred transparency it should be colourful but subtle. This is necessary for the effect to be properly visible. Dull, low-contrast backgrounds would simply fade away under the objects and the effect would be lost. They also can’t be too cluttered or detailed.
Subtle, light borders on translucent objects
Semi-transparent white borders simulate the glass-edge and can make objects stand out from the background.
Why is Glassmorphism so Popular?
Glassmorphism is a modern UI design trend that’s steadily been growing in popularity over the course of the past year. Commonly being utilised in web and app design, it’s quickly becoming mainstream. But it isn’t necessarily a brand new idea. The style is heavily influenced by similar concepts that have been first introduced by Apple in 2013 with iOS 7. It re-emerged when Apple brought back the effect with its latest update, MAC OS Big Sur in November 2020.
It has since been used in Windows Vista and Microsoft as part of their Fluent design system. Those who remember the switch to iOS 7 and Windows Vista will recall how refreshing it was to view notifications popping up with blurred items in the background. Microsoft calls this effect “The Acrylic” and uses it on app surfaces to add depth and help establish a visual hierarchy. The style has lived on and developed over the years. It has reinvented itself with modern fonts, colours, and shapes to keep things fresh and new. Check out some of these examples to see why this trend is as popular as ever.
How to Utilise This Trend
Whilst this effect isn’t all that difficult to achieve, there are a few things to consider. Glassmorphism should be incorporated at the designer’s best judgement. It’s very important to not overuse it. This style shines the brightest when it’s used on just one element or two. Regular contrast should be used for all others, incorporating UI design best practices. If you need a refresher on UI design, have a skim through our simple strategies for effective UI and UX design.
Glassmorphism can be incorporated in three easy steps:
Picking the right layers
Go through your website or app mock-up and select the best vantage point for this visual style – but remember a) do not over-use it and b) it looks best over light and colourful backgrounds. Icons designed in this style are still a bit controversial, especially from an accessibility point of few. Whilst they are becoming more common, we recommend to use them sparingly and with great consideration.
Source: Hype 4
Which background do you think works best for this style? Left side or right?*
Make it look glass-like
Glassmorphism aims to create the illusion of a glass-like panel floating over a background. Setting the right grade of transparency is relatively easy with common design tools such as figma. Just remember to not make the entire shape transparent, only its fill.And what about coding? Don’t worry, this effect can easily be achieved by tweaking your HTML/CSS. To get objects to look like frosted glass, check out this short guide on how to create glassmorphic elements in CSS.
Give it dimension
To give your design some dimension, add a fine border to your object and lower its transparency to make it look glass-like. Add a shadow underneath to give it a sense of depth. Again, these are slightly more technical changes that will also need to be tweaked in your code. If designing and coding isn’t really your forte but you’d like to incorporate this trend into your own web design, get a little help from the pros. If you’re still questioning whether you need to redevelop and redesign your website, here are some key signs to look out for that scream a change is needed.
Here is an example of an object with and without subtle borders. Source: Hype4
Accessibility Challenges
Despite its beautiful and minimalistic look, this style does come with some disadvantages in regards to readability. The lack of contrast can be extremely inconvenient for visually impaired and colour-blind users. Transparency effects, first and foremost, serve decorational purposes. They tend to make everything look like an action button. For people with vision problems to understand the interface, any objects on screen should always be able to function without the background. To achieve a design that works for everyone, you need to have a clear hierarchy. Objects need to have enough contrast and the right spacing to define that hierarchy and help visually organise related objects.
Time to Experiment With it
As design experts, we constantly need to explore new trends and creative ways of making products. In many cases and when used wisely, Glassmorphism can make websites and apps look more attractive to users. This is, if we can ensure a high user interface accessibility, so that even those with visual problems can navigate and understand it easily.
There is no strict rule book to follow when it comes to UI design and some of the best and most user-friendly websites are developed by creatives who play around with their designs. Remember that this is a trend, and mostly likely, this too shall pass. Now go and have some fun experimenting with what you’ve learned!
To read more about UX and UI and design solutions for your brand, visit our blog. If you have any questions or suggestions, don’t hesitate to get in touch with us directly. We’re here for you!* It was the left background! One that is very similar to Apple’s colourful default wallpaper for Mac OS Big Sur.
