Glassmorphism: The UI Trend of 2021
One of the most popular and exciting UI trends of 2020 was neumorphism. With neumorphism, the underlying goal was to create a plastic, 3D look through shadows and hyper realistic elements.
In 2021, UI designers are witnessing the emergence of a similar trend: glassmorphism. Like neumorphism, glassmorphism is based on creating a 3D interface. The distinguishing characteristic of a glassmorphic design is the use of partially transparent “glass panels” on a colorful, blurred background.
While designing the cover image for this article, I implemented the glassmorphism effect myself following these same guidelines.
But, unlike my cover design, more complex real-world examples have a multi-layered approach that uses multiple glass panels. In these situations, it is important to maintain the illusion of depth. To do this, panels that are closer to the user are more transparent while panels that are farther away from the user are less transparent.
Another important element of the glass panels are the borders of the panels. As with any element (regardless of the design style), the goal of a border is to separate the element from the background by making it stand out.
Glassmorphism calls for subtle, partially transparent borders that mimic the edges of regular shards of glass you see in real life. Borders should also be white or another light color.
In contrast with the glass panels, the background must be brightly colored to emphasize the glassmorphism. If dull colors are used, the background will just fade away under the glass panels and the user will not notice effect.
Ideally, backgrounds should also have multiple colors to further accentuate the glassmorphism. Even so, an excessively intricate background will make the background too cluttered. This can make elements inside of the glass panels hard to read.
As you can see, when the effect is applied correctly, the glass panels seem to morph into the background. This is where the name comes from.
To create the glassmorphism effect on your own projects, the process is quite straightforward using HTML and CSS.
First, you’ll need to find an appropriate image or use a linear gradient effect to make your background. You can add define this styling for your body tag.
Next, you should create your glass panel by setting it up like a regular card element. You should create a special class for this (I prefer naming it “card” just for simplicity). Set your width, padding, and margins to your preferences and customize the content of the card with different fonts, colors, etc. as well.
To add the glass effect, you should introduce three new properties to your card class: color, opacity, and backdrop-filter. You’ll want to set your color to white and change your opacity to a value between 0.5 and 1 to create the semi-transparent effect. Then, set your backdrop-filter property to blur(15px). You can experiment with the number of pixels to see which values work the best for you.
Finally, remember to add the border to your card. Make sure to use a small width and a light color so that your card’s borders look like a glass edge. A border radius of 2 pixels works well.
After all your CSS is complete, add a div tag with class: card to your HTML file and write the content of the card in between the tags. Now you’ve made your very own glassmorphism website!
“Glassmorphism: UI Design Trend for 2021?” Anchordigital, Anchordigital, 23 Dec. 2020, anchordigital.com.au/glassmorphism-ui-design-trend-for-2021/.
Kidecha, Sanjay. “Best UI Trends For 2021: User Interface Design Trends.” Kody Technolab, Kody Technolab, 21 Dec. 2020, kodytechnolab.com/best-ui-trends-for-2021.
Malewicz, Michal. “Glassmorphism in User Interfaces.” Medium, UX Collective, 22 Nov. 2020, uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9.
Szogyenyi, Zoltan. “What Is Glassmorphism? Create This New Design Effect Using Only HTML and CSS.” FreeCodeCamp.org, FreeCodeCamp, 29 Mar. 2021, www.freecodecamp.org/news/glassmorphism-design-effect-with-html-css/.
