How did glassmorphism develop in 2021 and does it have a future?

It s been almost a year since I first coined the term “glassmorphism,” so let s see how this trend developed.

How did the term come about?

The main reason for the appearance of the concept “Glassmorphism” was simple. The effect was not new (it appeared almost 10 years ago), but each company called it differently.

You may have come across different names from “acrylic” and “frosted glass” to “glass effect”. Without a common name, it would be difficult to explore use cases, ideas, and examples.

It would make learning much more difficult.

Design development by subscription

Try a new training format with the country s leading designers. You swing like in a game, mentors help you with any questions and go to private design events. And that s not even all.

Join

Fortunately, the name stuck, and today there are over 3500 Dribbble shots using this tag (Glassmorphism) to compare shots with the Neumorphism tag of 5500. Keep in mind that neomorphism, as a name, has been around for a year longer.

Looking through the glass

Today, there are at least four main ways to achieve a frosted glass-style blurred background. You can:

• Use a fill with reduced opacity
• Use a linear gradient with uneven (but lower) opacity
• Use a modified radial gradient to make it almost transparent on the outside.
• Use any of the above three noise texture tricks to give the design a matte look.

Of course, you can combine these effects together, and even add a couple of them at the same time.

Another distinguishing feature is the use of a border, which can be a transparent color (black or white) or a gradient (linear or radial). It can be thicker or thinner, depending on what you want to achieve.

And of course, there are different levels of blur you can work with.

Glassmorphism and the dark theme

When this trend emerged, it was clear that most of the examples used white, “matte” glass surfaces. Since then, it has evolved a lot towards a dark theme, often mixed with neon colors. I have prepared for you a simple video tutorial on how to create glassmorphic cards for a dark theme:

The dark theme also allowed for more noticeable radial gradients even on a dark background, as it makes these glass cards look much better than their light counterparts.

Some research has led to the application of colored overlays to monochromatic glass, which in turn has spawned an even greater variety of styles.

More options, more flexibility

I believe that this is one of the reasons why this style has not sunk into oblivion, instead it is still used both in real products and in design research.

Mainstream

Microsoft has unveiled a beta version of its next Windows OS, which relies heavily on glassphmorphism / acrylic to display the window hierarchy. The same effect has been used for some time in macOS Big Sur, and before that in Windows Vista, iOS 7 and many other operating systems.

However, current use in both Mac OS and Windows is much more advanced, simpler, and has better overall accessibility.

Availability

I ve talked about this many times before – a design trend is as accessible as you make it accessible. This means that even neomorphism can be accessed if you choose the right contrast for all the important elements and keep experimenting while limiting decorative elements.

Aurora UI

As I predicted, Aurora UI-style backgrounds are gaining popularity and, when mixed with this style, give interfaces the freshness they need – at least for now.

Simple, heavily blurred, intersecting ellipses seem to work, but in order to accentuate the glass effect, you ll need a few more opaque objects in the background.

The future of glassmorphism

Unlike neomorphism, the glass effect will probably stay with us a little longer. It has more uses than most other recent styles, pairs well with both light and dark themes, and can be used with good accessibility and contrast.

It s worth trying to use glassmorphism in an interface, but it s important to realize that it works best when limited to one or two screen elements.

Adding an effect to all screen elements can have the same negative consequences as neomorphism and lead to boring, overwhelmed designs.

Make it unobtrusive, keep it simple, and experiment!