by Janina Schindler -

How to Glassmorphism

In this blog entry I will have a look on how to implement Glassmorphism in figma, but also briefly in code. 

First you start off by choosing a colorful background or a simple background with colorful elements, which will be seen partly due to the transparency of the glassmorphic card element in front. It works very good with gradients, why I have chosen them for my example. Ones the background is set, create a card and choose a linear gradient for the fill, which consists of two white colors of different opacities. It is important to change the opacity of the fill, but not the opacity of the whole object. With a background blur, the glass optic becomes visible and you get a first preview of the look. 

Add an outline to indicate the borders of the object. It later helps to establish the hierarchy. For a better illusion of depth, additional linear gradients that fit to the background can also be applied to the outline. A subtle shadow rounds everything off and helps to distinguish all the layers. Also the content is placed in an Overlay layer mode, which attaches it more into the card. By using noise, the frosting effect is created and gives the card the perfect glass optic. 

But what about the visual hierarchy with this transparent elements? 
As in Neumorphism, also Glassmorphism uses the skeuomorphic approach of the real world counterpart, which in this case is of course glass, as a guideline for shadows and blur effects. When there are multiple layers of glassmorphic cards, each of them should receive a subtle shadow as described above. 

The differentiation of the blur helps to show which element is at the top, middle and back. As in the real world, the farer away a frosted glass is from the background, the more blur the background seems to be through the glass. For applying this, just start with the back element and give it a blur value of 15, the middle one has to be a little more blurred, around 25 and the top one can be around 40. To make the hierarchy totally clear, it is also necessary to decrease the opacity from the top card to the lowest. In the image below, the top card has an opacity value of 36, while the bottom one has only 16. To complete everything, add the borders applying the rules from above or just use a white outline. Either way the outline has to have a lower opacity from the top card to the lowest card, for which one can orientate on the applied blur as well.

To make glassmorphic icons, the rules showed in the figma file above are usually implemented in a single element of the icon, which is placed in front of colorful background elements. The actual color of the icon is sometimes also displayed in the transparent glass surface. In the images below, you can see various examples of how Glassmorphism is implemented on icons. The simple step by step guide from above can be used to create the glassmorphic icons from scratch.

While Neumorphism is mostly used for interactive elements like buttons, cards, toggles and sliders, Glassmorphism is more used in a passive way. It is supposed to give the interface a smooth and modern look by reducing the style to only small and non interactive background elements like cards, icons, overlays etc. 

As with Neumorphism, there is a generator for glassmorphic card elements available online which gives a preview and generates code to copy for your css code.

https://glassmorphism.com

I found lots of tutorials how to implement Glassmorphism in code, one of the examples how to do it you can see below. Basically there are only a few lines of code in html and css (focus is on css) which are very similar to the principle of creating this style in figma.

Sources

https://www.youtube.com/watch?v=8UWkR1H5E4o
https://www.cmarix.com/blog/glassmorphism-the-new-trendsetter-in-2021-for-ui-design/
https://uxmisfit.com/2021/02/03/glassmorphism-guide-to-visual-hierarchy/
https://www.crafted.at/b/3-ui-design-trends-im-check-teil-3-glassmorphism/
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

https://www.youtube.com/watch?v=HfKBKQOyWHM
Generator: https://glassmorphism.com
https://youtu.be/Li2apfUzKeE
https://youtu.be/IJrLL3G6xQc
https://youtu.be/rLeCNS1jfwM

by Janina Schindler -

From Neumorphism to Glassmorphism

In one of my former blog entries, I talked about the potential strengths and weaknesses of Neumorphism, also called soft UI. The most significant issue was obviously the accessibility. Also due to the skeuomorphic elements, it was not as flexible in its design style as for example a flat design approach. It has to be used restricted, in order to obtain a nice accessible und understandable interface. It works best with a simple UI and a strict limited hierarchy. 

Say Hello to Glassmorphism
In comparison to the extruding/intruding optically plastic effect of neumorphism, a more vertical trend Glassmorphism has evolved. It’s most defining characteristics are: 

  • Transparency: background blur generates (frosting) glass effect
  • Multi-layered approach: objects floating in space 
  • Vivid colors: highlight the blurred transparency
  • Light thin outline: visibility of the borders of transparent object

One of the strengths of this design trend is, that the user can identify the hierarchy of the elements quickly. It is very easy to detect, which layer is in the front, middle and back because of the see-through objects. Just as with neumorphism, this style shines especially bright when it’s used on just one element. The right amount will ensure, that also people with vision problems will be able to still understand the user interface. With over-usage, such as integrating it as a default material design for the background, card elements and Icons, it restricts the accessibility and also can lead to a boring and unoriginal design. 

Neumorphism is best used for buttons, sliders and toggles, whereas this should be avoided Glassmorphism. Glassmorphic elements work best as (floating) cards and overlays, which we know is problem for neumorphism, because all elements attach themselves to the background. As with all UI designs, it is important to visually group all elements on the cards and define a hierarchy for this as well. 

History and Future
The system behind Glassmorphism is not as new as one might think, the panel blur is being used in several ways since 2007, where it was first introduced by Windows vista with Windows Aero and later integrated by Apple in iOS 7 in 2013.

Pulling down notifications and see the icons fade out behind a panel is nowadays integrated in the standard UI. Microsoft’s Fluent design system goes heavy on this effect as well. They call this particular element The Acrylic and showcase it as an integral part of their design system. Apple has since greatly reduced the blurry-glass effect in their mobile OS, but recently brought transparent-blurs back with Mac OS Big Sur. However, on Dribbble – a platform for discovering and connecting with designers, Glassmorphism is used for desktop applications as well as mobile devices and seems to be not at all limited to a specific device. But also Dribbble is more about the design being pretty instead of accessible, therefore there are also lots of examples where Glassmorphism is definitely overused and also the designs are not restricted to an operating system. 

Since Glassmorphism is used in the current Mac OS version Big Sure and also on Microsoft Fluent Design, I would predict the trend will definitely become more popular and rise, to also be more present on our mobile devices. 

Sources:

https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

https://uxmisfit.com/2021/02/03/glassmorphism-guide-to-visual-hierarchy/

https://www.cmarix.com/blog/glassmorphism-the-new-trendsetter-in-2021-for-ui-design/

Images:

Featured Image:
https://dribbble.com/shots/14944850-Wallet-App

History: 
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

Smart Calendar App: 
https://dribbble.com/shots/13842720-Smart-Calendar-App