This is the 2nd launch from Glassmorphism. View more

Glass UI Generator

CSS generator for glassmorphism

Get started with this free CSS generator based on the glassmorphism design specifications.

Free

Launch tags:

Design Tools•Developer Tools

Launch Team

Zoltán Szőgyényi

Flowbite

Maker

Hey Product Hunt 👋 Thanks for checking out the Glass UI generator. I'm one of the guys who worked on this tool, alongside with Robert, who was the designer. So what is Glassmorphism? Glassmorphism is a new design trend which is primarely based on the blurry effect of an element and a background. Although glassmorphism can be seen dated all the way back to Windows Vista, it has recently re-emerged with the macOS Big Sur update and it is increasinly being used across all platforms, including mobile apps, websites, and desktop programs. Why use the Glass UI generator? You can use this free tool to generate the CSS that is needed to get the glassmorphism efffect. It is useful because you can see how the effect will look compared to a background image, a gradient background, or even on solid colors. It is very easy to integrate in any project, because the code that is generated is plain old CSS. What about the components? The HTML code? This Glassmorphism UI generator is based on the upcoming Glass UI library which will be available to download or include via NPM. For the HTML components to work, you need will need to include the CSS and Javascript file from the library. The release is estimated to happen in July, 2021. Feel free to sign up for Glass UI to get updates and find out when it will be launched. That's about it! We will add a couple of updates here and there. The tool is entirely free to use, and the CSS library for the components will also be available shortly and it will be open source under the MIT license ❤️

Report

4yr ago

Joseph Abraham

SaaS for Greater Good

@zolidev : Absolutely great product, would this work on Webflow, if I export/copy the CSS and HTML? (Disclaimer I'm a newbie to webflow and web design)

Report

4yr ago

Zoltán Szőgyényi

Flowbite

Maker

@saascoach Thanks, Joseph! If Webflow or other website builders allow you to add custom CSS, then sure, it should work on any element!

Report

4yr ago

Joseph Abraham

SaaS for Greater Good

@zolidev :Thanks a lot, I'll keep you updated if it works :)

Report

4yr ago

Savian Boroanca

Surfsite AI

@zolidev congrats on the launch! The way you put things together is brilliant. Well done! 🚀

Report

4yr ago

Zoltán Szőgyényi

Flowbite

Maker

@savian_boroanca appreciate it, Savian!

Report

4yr ago

Rob Works

Sessions

This is great. Love how you set the min/max values to keep everything looking good even if you go rogue with the sliders.

Report

4yr ago

Zoltán Szőgyényi

Flowbite

Maker

@robertgavriles1 Thanks. Sometimes a bit of limitation isn't bad :)

Report

4yr ago

Alexandru Paduraru

Creative Tim

This is looking great @zolidev and @roberttanislav 😻 can't wait to see more components. Our team is ready to start making new products on top of this!

Report

4yr ago

Zoltán Szőgyényi

Flowbite

Maker

@roberttanislav @axelut Thanks, Alex! We're doing our best regarding the library, I'm optimistic that it will live up to its expectations.

Report

4yr ago

Glassmorphism

A modern CSS UI library based on glassmorphism

Glassmorphism Launches

Do you use Glassmorphism?

Review Glassmorphism?

Reviews of Glassmorphism

Glass UI Generator