Glassmorphism - a new UI trend for this 2021
Mixing a "creative" background with minimal UI components is the best compromise between functionality and accessibility, but it must be done correctly.
What is glassmorphism?
Glassmorphism is a unified name for the popular Frosted Glass aesthetic. It has many names depending on the company using it, so we wanted to create a common ground for designers and developers to find related resources easier and faster.
It’s most defining characteristics are:
Transparency (frosted-glass effect using a Background Blur)
Vivid colors to highlight the blurred transparency
Multi-layered approach with objects floating in space
Light border on the translucent objects.
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.
The effect is based on background blur with transparency, and uses stacked layers to show the depth and context of the interface.
First, how to start with glassmorphism?
You can use existing interface components as long as they have good enough contrast, sizes, and tactile effects. There are three main ways to create this effect:
Blurry shapes, the blurry shapes method works by creating irregular (preferably oval) shapes and then blurring and blending them to create an irregular gradient
Lots of gradient, this method combines gradient fills (works best radially) with decreasing opacity towards the outer edge of the fill. The more transparent the outer edge overlaps, the more the colors will blend in
Use a photo, if you have a photo that already has a couple of soft color transitions, you can blur (with maximum blur value) the photo and have this organic effect with minimal effort
Next step
Select the overlay style you like (glass isomorphism, standard transparent or opaque), and you will have a beautiful Aurora style UI.
Make sure all important interface elements are accessible and make your UI stand out, at least until everyone else blurs its background and the pendulum will start to swing again.
Final details
The last thing you have to do is to add a 1px inner border to the shape, using some transparency. It simulates the edge of glass and can make the shape stand out from the background. experiment! This style element like background blur has been around for many years, but now it is becoming more and more popular, so there are still many cool creative effects to explore here.
Browser compatibility
Property backdrop-filter according to ‘Can I Use’ is fully supported by Chrome, Safari, iOS, Android Browser and Edge. Firefox is not supported by default but can be enabled.
Conclusion
There are yet some useful tools around the web. Glassmorphism.com is a web tool that allows you to manage some basic parameters, such as background color, transparency and blur, to generate a preview of the UI with ‘a touch’ of glassmorphism. You can also check out on the ui.glass website, an upcoming CSS UI library, that will be available via NPM, but it will be also posted on GitHub under the MIT License.
Let’s start to add a touch of gall to your UI.
Thanks for reading! 🙏
If you feel like talking, connecting or just want to see what I’m up to, we’re on italianswho.design and you can contact us on info@italianswho.design