DEV Community

Cover image for Exploring the Glassmorphism Hype

Posted on

Exploring the Glassmorphism Hype

Just hover the buttons!

I have to be honest: most hypes come and go. The frosted glass look that currently seems to be the "must have" will fade as well. Additionally, whether it is the accessibility and the contrast-issues or the --- never mind, I just hovered the button and I love it!

I imagine I am not the only one with that experience. I decided to create a little CSS template so you can hover the buttons as well. Joke aside, the template is built on Gaudiamus CSS and therefore allows very easy adoption to whatever corporate identity you need to adhere to. If you like it, don't forget to leave me a star on GitHub:

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.

Top comments (0)