HTML and CSS for the new glassmorphism UI trend of 2020

Tam Nguyen
Bootcamp
Published in
Dec 9, 2020

--

The new trendy Glassmorphism UI

The past ten years have been a roller-coaster ride in the design world. Each years, the designers communities all around the world always come up with something new, something fresh. This year is not an exception.

Works like a Swiss-made clock, the global designers community has already came up with a new style on the block right now and it’s growing. Here are some of the most defining characteristics of the this year’s trend:

  • The use of saturated colors to make the transparency pop out.
  • Transparency
  • A subtle, light border on the transparent objects.

You indeed can see through it, and that means users can establish hierarchy and depth of the interface.

Below is a piece of HTML, CSS code that implements the Glassmorphism style on CodePen. Feel free to check it out.

--

--