Training for glassmorphism

Hello everyone, today we are going to talk about design ! And more specifically about this trend : glassmorphism.
Glassmorphism is a style that plays with transparency, it gives the interface a modern and pure look. This style trend is more and more popular for websites, mobile applications and OS. Apple, in particular, does not hesitate to use it, and still uses it on the latest versions of macOS :

How does Glassmorphism work ?

First, we will focus on how glassmorphism works, and the logic behind it.
First of all, how are the elements hierarchised when using galssmorphism? It's actually quite simple to understand, and it's important to remember that this is what glassmorphism is based on: the closer an element is to us, the more light it attracts (this creates a visual hierarchy). In the case of glassmorphism, this means that the closer an element is to us, the more transparent it will be.

Glassmorphism creates a sense of transparency by mimicking virtual glass and the blurring effect of the background, but to really see this, it is recommended that an element is styled against a light, coloured background.

The blurred effect of the design is enhanced by the use of vibrant, bright colours. To emphasise the blurred transparency, it should be colourful but subtle. This is necessary for the effect to be clearly visible. Dull, low-contrast backgrounds will simply fade under the objects and the effect will be lost. They cannot be too cluttered or detailed either.
When styling an element using glassmorphism, it is also important to put a subtle border around the edges of the styled object. Semi-transparent white borders simulate the edge of glass and can make objects in the background stand out.

Accessibility : glassmorphism can cause some problems in terms of accessibility. Indeed, the blur effect may not be supported on some browsers. For example, unlike Chrome, Firefox has trouble with CSS effects using the "blur" effect.

How to achieve this effect ?

To achieve this effect, as we have seen previously, we will need to use borders, semi-transparent backgrounds (using rgba colours in particular), and background blurs.

Our CSS code could look like this, for example, if we design a box :

.box{
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
}

You can add the CSS property box-shadow to enhance this depth effect.

Finally, if you want to apply this effect to several overlapping elements, you can use the z-index CSS property.

With these few properties, you are able to create elements using glassmorphism. You can practise by using the example below, and adding boxes for example.

I hope this information has helped you to better understand glassmorphism and why not use it for your projects. If you have any questions, don't hesitate to ask them in the comments. 👍