DEV Community

loading...
Cover image for Show dev: glassmorphism CSS generator
Themesberg

Show dev: glassmorphism CSS generator

Zoltán Szőgyényi
CEO at Themesberg. I turn beautiful coffee into delicious websites. He/him.
Updated on ・1 min read

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

Discussion (8)

Collapse
sm0ke profile image
Sm0ke

Looks super nice!

Collapse
zolidev profile image
Zoltán Szőgyényi Author

Thank you!

Collapse
barelyhuman profile image
Reaper

That domain choice! <3

Collapse
zolidev profile image
Zoltán Szőgyényi Author

😅

Collapse
sidcraftscode profile image
Siddharth Chaudhary (he/him)

Great really nice 👍🏻

Collapse
zolidev profile image
Zoltán Szőgyényi Author

Thank you!

Collapse
crearesite profile image
WebsiteMarket

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

Collapse
zolidev profile image
Zoltán Szőgyényi Author

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.