Glassmorphism: What it is and how it’s going

Design trends often appear in UI design every so often, as we’ve seen with the likes of skeuomorphism, flat design, and neubrutalism. Have you noticed the particular trend that appears to have glass floating on the page? It’s a three-dimensional effect that uses transparency, depth, and hierarchy to create an illusion, transforming a solid, opaque screen into a modern and translucent one. That trend is called glassmorphism, which can be described as a “frosted glass” aesthetic.

Over the past few years, glassmorphism seemingly appeared out of the blue. In this article, we’ll talk about the history of the trend and how it spread across the design community. We’ll also look at the components of glassmorphism, how to create the effect in Figma, the benefits and drawbacks of using it, and whether or not it’s a useful trend to follow.

What is glassmorphism?

Glassmorphism is a UI trend that’s used to create the illusion of a glass-like texture. It aims to give a fresh, transparent feel to modern interfaces that all too often use the same opaque designs, which can start to feel boring, unoriginal, and overdone:

A glassmorphic design incorporates elements like transparency, layers, background blur, gradients, and shadows to achieve a floating glass effect that’s almost futuristic. It can be compared to depictions of three-dimensional holographic interfaces in films like Marvel’s The Avengers, which appear floating in the air:

Needless to say, glassmorphism achieves an aesthetic that stands out from the crowd of overused flat designs. But how did the trend become popular among the design community? Let’s take a look at the history of glassmorphism and how it came to be.

A brief history of glassmorphism

The overall effect of glassmorphism may seem like a drastic change from previous design trends, but let’s look at history to understand how it has evolved into its current aesthetic.

Blurred backgrounds

Microsoft publicly launched Windows Vista in 2007, which introduced the design language Windows Aero. It’s easily recognizable by its emphasis on translucent backgrounds and a frosted glass look to its design. Aero pioneered the glassmorphism trend in UI design by incorporating elements of transparancy, layers, and blurred backgrounds to create the glass effect:

In 2013, Apple launched iOS 7 which gave a fresh makeover to its iPhone interface. Similar to Windows Vista, this release introduced a blurry, translucent background to overlays, creating that frosted glass effect. Dimming the content behind the overlay created a sense of depth and visual hierarchy:

This design style has continued with Apple’s future iOS releases. Even with its latest iOS 17 release, it continues to leverage the glassmorphic effect when accessing menus and overlays. It has decluttered its interfaces by scaling back its use of borders around elements, relying on darker overlay backgrounds to visually separate them:

Inspiration from movies and video games

If you’ve watched sci-fi movies from the past, you might have noticed that the interfaces featured in these movies often have a similar aesthetic. For example, Iron Man 2 showed Tony Stark’s transparent cellphone, which was a slab of glass surrounded by a plastic frame. The display incorporated elements of overlays and transparency to create an effect of a floating interface:

In the movie Prometheus, the interfaces in the cockpit have a clear background, giving the illusion of floating glass screens while the onscreen elements are each surrounded by a thin border.

This trend made its way into video games, as seen in Star Wars Battlefront II (2017), which features menu pages with a blurred background, and translucent cards with thin borders. While it doesn’t have all the components of the glassmorphism trend that we see in UI design today, it’s not hard to believe that inspiration was taken from these futuristic-looking interfaces depicted in entertainment:

Popularity of glassmorphism

Glassmorphism has gained a lot of popularity amongst the design community. And like with any design trend, designers on Dribble are the first to hop on it. As these inspiration shots begin to spread around online, the design trend continues to grow in popularity:

But glassmorphism has reasons for its boost in popularity. For starters, it creates visually appealing interfaces that stand out from a sea of flat design. It creates a sense of futuristic design that can make any website or application look trendy and modern. The design trend has found its way through the gaming and technology sectors due to the consumer-centric and attention-seeking focus of many of those businesses:

The key components of glassmorphism

Now that we’ve taken a look at the history of glassmorphism and some examples, let’s talk about the components used to create glassmorphic designs and how you can apply them in Figma. There are a few key elements involved in making the frosted glass effect:

Gradients

To achieve glassmorphism, the glass element usually sits on top of a gradient or textured background. The background itself will have gradient objects beneath the glass surface, such as shapes or images. The background elements blend behind the blurred glass object to create a translucent effect.

In Figma, a gradient can be applied to a frame or object by selecting the Gradient option in the Fill property. You can set different types of gradients including Linear, Radial, Angular, and Diamond:

Opacity

Glass is transparent by nature. To achieve a frosted glass look, glass elements have a level of opacity applied to their background. Having a low opacity (or high transparency) will make it difficult for users to read the content on top of the glass, as the background content will likely interfere. On the other hand, having a high opacity (or low transparency) reduces the frosted glass aesthetic.

In Figma, set the background fill color of your glass object to white. Then, change the opacity of your glass object under the Fill properties. Start with a 20 percent opacity and adjust it to your preference:

Background blur

Background blur is an essential component of creating a glassmorphic design. In addition to having a transparent background, glass elements should have a blurred background applied to bring the focus of attention to the content on top of the glass. The blur adds to the glass effect as the colors beneath the glass blend in with the clear background of the element.

In Figma, add a Background blur to your glass object under the Effects property. Set the blur between 50 to 100 to achieve your desired result:

Borders

Give the glass some shine to it by adding a thin border. A 1px solid white border with 100 percent opacity might be a bit too strong for a realistic glass look. Instead, apply a diagonal gradient to the stroke with white fill at one end and a color fill on the other end.

Adjust the opacity at each end. Add a white fill in the middle of the gradient with 0 percent opacity to give it a realistic shine effect:

Drop shadows

For the final touch to your glass element, create depth between it and the background. Add a gray drop shadow to give the illusion of the glass floating on the screen. Avoid making the drop shadow too prominent, as this should be a subtle effect:

Now, your glassmorphic design is complete. Experiment with different opacities, gradients, and drop shadow values to achieve your desired effect. There are endless options to explore.

Benefits and drawbacks of glassmorphism

As with any design trend, there are benefits and drawbacks to using glassmorphism in your designs. It’s important to understand its strengths and weaknesses before deciding whether to use it for your website or app.

Engaging and dynamic

Glassmorphism can add a modern and trendy look to a landing page or application. It’s futuristic and visually pleasing, which can boost user engagement trustworthiness, especially among younger audiences. The floating glass look has a memorable effect on users due to its distinctiveness, which also helps with strengthening your brand:

Visual hierarachy

Using glassmorphic effects on a few key elements can be used to establish a visual hierarchy and draw a user’s attention toward them. In this example, the frosted glass cards stand out on the page due to their interesting appearance, arguably more so than the circled call-to-action button above it. This effect invites users to click on the cards, leading to further exploration of the website:

Interactivity

The combination of textured backgrounds, shapes, and a sense of depth can support interactivity on a website or application. By incorporating techniques such as parallax scrolling, motion, or microanimation, a glassmorphic design can be transformed into an immersive experience that captivates your audience’s attention:

Accessibility

As with many design trends that value visual appeal over usability, a drawback to using glassmorphism is its potential to be inaccessible to users. This is a significant concern given that many users have vision impairments and may face challenges consuming content on the web.

To ensure that your glassmorphic designs are accessible to all users, test the color contrast between content on the glass surface and the background. This can be difficult if your background has a blur of many colors, so color contrast can vary depending on the placement of objects.

Using a less transparent background can help increase the visibility of content on top of the glass. Apple’s MacOS uses glassmorphism subtly on their dropdown menus, ensuring high contrast between text and the background color:

Avoid layering multiple glass objects on top of each other or overusing the effect, as this can reduce the visibility of the content while increasing the amount of visual noise shown to the user. Keep glassmorphism subtle to achieve more accessible results:

Dark mode

Generally, a dark mode version of a screen has a higher color contrast between text and background. This can lead to more readable and usable interfaces, and thus better accessibility. Consider adding a dark mode to your glassmorphic designs, or using a darker background color by default to increase the color contrast:

Is glassmorphism a useful trend to follow?

While it can be an interesting effect to use for attention-seeking designs, such as web landing pages or menus within an application, glassmorphism should be used sparingly and thoughtfully. Its strength lies in its visual aesthetics and ability to capture users’ attention. But “less is more” definitely applies to this trend.

Both Microsoft and Apple have shown that glassmorphism can add depth and hierarchy to a design with menus, popups, notifications, and other overlay elements. The key is to not overdo the effect and to always keep the user in mind. A visually appealing design is not always useable or accessible, so it’s important to test out your designs with users to understand where they can be improved.

Virtual reality

An interesting application of glassmorphism by Apple is with its visionOS. In the realm of virtual reality (VR), Apple has applied glassmorphic techniques to the floating interfaces that users see through its VR headset.

Given the variability in a user’s surrounding environment, the transparency element of the interface can help control color contrast and brightness without fully blocking out light from behind it:

Conclusion

Glassmorphism has continued to evolve over the years as designers have added their creativity to the frosted glass UI trend. It provides a fresh and modern aesthetic in a sea of overused and imitated designs. Some inspiration may have been taken from the futuristic ideas portrayed in movies and video games, leading to an effect that resembles a floating, transparent interface.

Designers that want to implement glassmorphism in their design should consider the key components: gradients, opacity, background blur, borders, and drop shadows. By experimenting with these properties in Figma, you can achieve a range of outcomes that can lead to increasing user engagement and interactivity for your website or application. Just remember to test your designs for accessibility to ensure that users can read and comprehend the content with the glassmorphic effect applied.

As with other design trends, glassmorphism may continue to gain popularity or eventually be left behind for something new. It’s a flexible trend that pushes the boundaries of modern UI design and leaves a lasting impact on digital experiences.

Header image source: IconScout