CodeNewbie Community 🌱

Cover image for What is glassmorphism?
neoan
neoan

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

Glass

screen

Very simple gaudiamus example to build on top of.

live demo

screen

Use it:

  1. fork this repository
  2. clone & enjoy

Requirements

  • 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.

Files

_buttons.scss

Handles button & icon behavior

_card.scss

Handles card glassmorphism

_effects.scss

Masking, clipping & scrollbar

_form

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

_menu

Navbar & mobile menu

_variables

SCSS-variables

style.scss

Main stylesheet & font setup

components/toggle.js

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)