Glassmorphism Generator - Get glassmorphism snippets in seconds

Glassmorphism Generator - Get glassmorphism snippets in seconds

Feb 6, 2021ยท

5 min read

Play this article

Yo!!! Did something new this week!

Made an awesome glassmorphism generator. But, what is glassmorphism? Basically, it's making elements that look like floating glass on the page.

So a glassmorphism generator creates glassmorphism CSS code for you. Check out here (Live Demo)


Recently I've been obsessed with trying many different design trends. But I'm lazy (๐Ÿ›€) and I hate rewriting code (Infact, I hate writing anything ๐Ÿ˜…) like most of us devs ๐Ÿ˜Ž. This is a major problem, so I decided to start making snippet generators for every recurring CSS code I can find starting with the trending glassmorphism. Just in time for the hashnode hackathon too.

Development Process


I already had some knowledge on how to do glassmorphism but, I did more research. Shout out to HYPE4, their glassmorphism generator is really cool. HYPE4 Glassmorphism Generator Basically, to do glassmorphism, you need just 3 main things. Transparency - Since most glass are transparent. Blur - To make it look like frosted glass, we need to make it a little blurry. Shadow - Lastly, we need to add shadow behind it to make it look like it's floating.


Since it's a fairly small project (and I'm lazy ๐Ÿ›€) so I scribbled a simple design on a piece of paper. Design Sketch Then refactored it till the current version

Current Version

Current Features

  1. Be able to visualise glassmorphism code as you update it with sliders.
  2. Display the code snippet.
  3. Copy to clipboard in one click.
  4. Syntax highlighting for the code.
  5. Useable offline.

Choosing my tools

To keep things simple I decided to use

  1. HTML
  2. SCSS (It's a CSS preprocessor. It's makes CSS more awesome).
  3. JavaScript
  4. JSON
  5. And VSCode

Time to get started.

Challenges I faced

I faced and overcame lots of challenges along the way. Just to mention a few: The first challenge and one of the simplest was converting the values from the color input to RGB. Created a function to hex to RGB.

Then there second was displaying the code. I couldn't find any way to get the CSS code from the file and display it so... I wrote a mock version of it and updated the values for every change.

Another challenge was getting prismJS to update everytime the code updates.

Then the most confusing was making it work offline. I found something called progressive web apps but, I kept getting same errors. I figured it out in the end though. ๐Ÿฅณ๐Ÿฅณ๐Ÿฅณ


It's the first time I've made a pwa, so to me it's a really big deal. I think I'll be making more of them now. It's also my first DevTool.

Future Features

  1. More Glassmorphism previews.
  2. A chrome extension.
  3. Dark and Light theme
  4. Editable texts and movable glasses.
  5. Downloadable preview PNGs.

You can check out the code here on GitHub. And the live demo here.


This project is open to contributions. Feel free to make a pull request anytime.

It wouldn't hurt to leave a heart or a comment, would it?๐Ÿฅบ Thanks โค๏ธ


Licensed under MIT.

Connect ๐Ÿ”—

Facebook Twitter [Github](