A Look At Glassmorphism - 2021's Web Design Trend

Published: 11 months ago

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!

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

isotropic black Friday deal finder

Search, sort, and filter through the best BFCM WordPress deals online.
BROWSE DEALS

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram