isotropic-2022
Share
Blog
Search
Menu

A Look At Glassmorphism - 2021's Web Design Trend

By James LePage
 on January 13, 2021
Last modified on January 6th, 2022

A Look At Glassmorphism - 2021's Web Design Trend

By James LePage
 on January 13, 2021
Last modified on January 6th, 2022

Remember Neumorphic design? Well, for 2021 there's a new trend in town called Glassmorphism. In this article, we will be talking about the main ideas behind the Glassmorphism trend, where Glassmorphic design is used in real world products, and the probability that this will be adopted by the industry. First, here's a rundown video of what the trend is, and how to recreate the Glassmorphism look using HTML and CSS.

Video Intro

Glassmorphism - How To Achieve With Pure CSS

The main idea behind this trend is achieving background separation by using transparencies, blurs, and box shadows to create a similar visual to what frosted glass does in real life. Hence the name Glassmorphism. There are three major concepts to create different interior for my transparent background that also has a backdrop blur filter applied to it. That makes all background content blurred. Then, you have a semi transparent border that creates a rounded effect, and finally you push the glass pane away from the background image or content by using a subtle box shadow.

See the Pen Glassmorphism Card CSS by James (@Isotropic) on CodePen.

Is Glassmorphism A Fad?

The major problem that I see with the Glassmorphism trend in the future is the fact that fire Fox does not support backdrop filter , meaning that you won't be able to achieve that blurred look on that browser. Because it's a fairly popular browser, this could definitely cause some issues. Another problem may be the accessibility of the website, though Mac OS Big Sur utilizes these concepts without issue.

I believe that even when Firefox begins to support this CSS property by default, we won't really see this adopted in standard web design. However, I reasonably expect the fintech industry to adopt something like this, as they already do this with their credit cards, and I can 100% see Glassmorphism concepts integrated into the Stripe website.

To expand upon this trend, I think that incorporating background motion or draggable elements is the best way to seriously make use of the Glassmorphism concept. For example, Stripe has a great animated gradient background, and doing that with css and basic keyframe animations is relatively easy to do.  

What do you think? Leave your thoughts in the comments below!

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram