CodeNewbie Community 🌱

Cover image for What is glassmorphism?

Posted on

What is glassmorphism?

Maybe THE UI design of 2021

What countless writers on Medium are writing about and users of Apple's messenger call their UI update is what VS code modders dubbed "vscode-frosted-glass-theme": The design principle I am talking about is called Glassmorphism and from big tech to smaller outlets everyone seems to play with it. The effect itself is usually based on creating a semi-transparent frosted glass look based on the CSS property backdrop-filter and creates looks like this:

glass form

Have at it

If you want to explore this trend, feel free to explore a little (and free) starter template:

GitHub logo gaudiamus-css / glass

template / demo of a gaudiamus design



Very simple gaudiamus example to build on top of.

live demo


Use it:

  1. fork this repository
  2. clone & enjoy


  • SASS (dartSass, as libSASS is deprecated and does not support some used features)

First steps

The file style/_variables.scss is a good starting point. It includes common Gaudiamus variables and controls values like colors, breakpoints etc.



Handles button & icon behavior


Handles card glassmorphism


Masking, clipping & scrollbar


HTML form elements (input, textarea, select, checkbox)


Navbar & mobile menu




Main stylesheet & font setup


VanillaJS toggle e.g. for menu behavior. Should work nicely with all frameworks.

You can fork & clone and directly play with the HTML, but the true power comes with the included sass files for customization.

Beginner friendly

This template is built on gaudiamus and is therefore a great way to learn the ins and outs of CSS preprocessing with SASS, a powerful and useful tool when it comes to creating websites, designs & behavior.

Top comments (0)