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!