DEV Community

Cover image for Show dev: glassmorphism CSS generator
Zoltán Szőgyényi for Themesberg

Posted on • Edited on

Show dev: glassmorphism CSS generator

Hello devs 👋

Me and my friend decided to built a glassmorphism css generator based on an upcoming CSS library called Glass UI.

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:

  • multiple background types (gradient & solid)
  • change the background color
  • glassmorphism properties (blur, transparency)
  • component border radius
  • dark/light mode
  • card color
  • get the HTML code for the component (coming soon)

Here's a preview of the tool in both dark and light mode:

Glassmorphism CSS Generator in dark mode

Glassmorphism CSS Generator in light mode

The 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: https://ui.glass/generator

Top comments (8)

Collapse
 
sm0ke profile image
Sm0ke

Looks super nice!

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you!

Collapse
 
barelyhuman profile image
Reaper

That domain choice! <3

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

😅

Collapse
 
sidcraftscode profile image
sid

Great really nice 👍🏻

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you!

Collapse
 
crearesite profile image
WebsiteMarket

Useful, thanks for coding this tool.
The code is open-source?

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

The Glass UI library will be open-source. The generator is private, but the code generated by the tool is free to use, of course.