DEV Community

Cover image for Glassmorphism CSS Generator
Jon Snow
Jon Snow

Posted on • Updated on

Glassmorphism CSS Generator

Design isn't something that stays the same forever. Old trends go, new trends replace them. It's constantly evolving.

A relatively new trend on the web is Glassmorphism. You can imagine it as taking a glass panel and putting it in front of a background. Give the glass a little bit of colour and a blur effect which result in the background changing completely when you're looking through the glass piece. Now add the information that you want to transmit to your user on top and voilà, you've got yourself a pretty looking glassmorphism UI.

So We decided to build a free Glassmorphism CSS Generator

What you can do with this tool is that you can generate the css that you need to get the glassmorphism effect.

Some of the features include:

  • glassmorphism properties (blur, transparency)
  • component border radius
  • change the background image
  • change the card background color

We also add some crazy examples of Glassmorphism. they all are free to use

  1. Glassmorphism Profile Card

Glassmorphism Profile Card


  1. Glassmorphism Card Hover Effect

Glassmorphism Card Hover Effect






This tool is free to use and to play with. let us know in the comments section what you think about it, what would you do differently, or how we can improve it. Thank You 🧡🧡

Check it out: Glassmorphism CSS Generator

Top comments (10)

Collapse
 
titanxtream profile image
Tamojit Bhowmik

Glass morphism is a fantastic phenomenon in css . I really love it

Collapse
 
jon_snow789 profile image
Jon Snow

Even Microsoft and Apple are using it.

An Example of Glassmorphism on iOS in Apple products.


An Example of Glassmorphism on Windows 11 in Microsoft products.

Collapse
 
levischouten profile image
Levi Schouten

Looks really good, can’t wait to test it myself!

Collapse
 
beroburny profile image
Bernard Stojanović

Thanks for showing this.
Remember that 2 years ago backdrop-filter is not been implemented in Firefox and they didn't been interested in implementing it.

Collapse
 
philipjohnbasile profile image
Philip John Basile

I really love this :)

Collapse
 
jon_snow789 profile image
Jon Snow

I am glad you find it useful 😊🧡

Collapse
 
marissab profile image
Marissa B

And here I was the other day trying to figure out what that style was even called. This is fantastic! Definitely going to play with it.

Collapse
 
micha_bereszyski_726dd4 profile image
Michał Bereszyński

what for there is an input with hex color value? it does nothing

Collapse
 
jon_snow789 profile image
Jon Snow • Edited

Our team fixes the problem.

Collapse
 
jameslovallo profile image
James Lovallo

I'm thrilled that this is catching on, just don't forget about text contrast with moving backgrounds. Small things like a little text shadow can help with that, and create a nice engraved effect.