Subscribe
Sign in
Start new thread
Glassmorphism
p/glassmorphism
A modern CSS UI library based on glassmorphism
Visit Product
Zoltán Szőgyényi
Glass UI Generator — CSS generator for glassmorphism
Featured
86
•
Get started with this free CSS generator based on the glassmorphism design specifications.
Replies
Best
Zoltán Szőgyényi
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 ❤️
Joseph Abraham
@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)
Zoltán Szőgyényi
Maker
@saascoach Thanks, Joseph! If Webflow or other website builders allow you to add custom CSS, then sure, it should work on any element!
Joseph Abraham
@zolidev :Thanks a lot, I'll keep you updated if it works :)
Savian Boroanca
Launching soon!
@zolidev congrats on the launch! The way you put things together is brilliant. Well done! 🚀
Zoltán Szőgyényi
Maker
@savian_boroanca appreciate it, Savian!
Juan Sarmiento
Omg @themesberg @zolidev always has something neat up his sleeve, hope it gets more components added in the near future, i see some very cool projects coming out of this edit: typo
Zoltán Szőgyényi
Maker
@themesberg @juanpablosarmi Haha, thanks Juan! It's just the beginning with Glass UI, we can talk about some mutual projects if you want. :)
Alexandru Paduraru
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!
Zoltán Szőgyényi
Maker
@roberttanislav @axelut Thanks, Alex! We're doing our best regarding the library, I'm optimistic that it will live up to its expectations.
Alex Briukhovetskyi
Well done on spotting an emerging trend and building a great solution for that. We'll definitely use it on our website.
Zoltán Szőgyényi
Maker
@alex_briukhovetskyi1 thank you! We’re working right now on the library, and we’ll open source it as well. ETA 1-2 months.
Girdharee Saran
Nothing else to share! Pros: Great design Gives younger developers a good example of CSS Grid concepts, with a visual component Cons: None that I've seen as of yet
Rob Works
This is great. Love how you set the min/max values to keep everything looking good even if you go rogue with the sliders.
Zoltán Szőgyényi
Maker
@robertgavriles1 Thanks. Sometimes a bit of limitation isn't bad :)
Sajad
Congratulations 🎉 guys @zolidev and @roberttanislav the generator looks very great and awesome can't wait for the library and start building on top on this. 😍👏
Zoltán Szőgyényi
Maker
@roberttanislav @sajadahmadnawab Thank you, Sajad! Curious what you're going to build with Glass UI :)
Musharof Chowdhury
Congrats on the launch Zoltan, hope its gonna be a new trend-setter
Zoltán Szőgyényi
Maker
@musharofchy Thanks, Musharof! You're free to use the library when it's launched to build themes with it!
Musharof Chowdhury
@zolidev alright, nice domain name as well. How did you find this 🤯 how much was the cost?
Zoltán Szőgyényi
Maker
@musharofchy it was free to grab, but I'd rather not mention the cost. It was listed as a premium domain on Namecheap 😅
The LiveCanvas Team
Supercool tool... Hats off Zoltan! Can't wait to see the full Glass UI Library....we'll most definitely try to integrate with PicoStrap and LiveCanvas. You guys @ Themesberg rock!
Zoltán Szőgyényi
Maker
@dopewp_team hey guys, thanks a lot for the good thoughts, I’m also excited to see what you will build with Glass UI :)
Philip Holly
This looks amazing. What a useful tool. I'm not a designer so I wouldn't want to use this tool to make something from scratch, or else I'd spend hours deciding what I want. Would be great if we could buy a glassmorphism theme from Themesberg and then use the tool to make tweaks to components.
Zoltán Szőgyényi
Maker
@pholly appreciate it, Philip! We already have plans to build some themes and more advanced UI/UX tools/themes that you can use on top of the library that we will launch in the coming months
Fajar Siddiq
this is so useful for my next project!
Zoltán Szőgyényi
Maker
@fajarsiddiq glad to hear that, Fajar! We're also building an open-source UI library, maybe that will help you even more.
Alexandru Frentescu
Good luck guys to the top !
Akk+hill
I was searching for the same thing 2-3 days back. Great work :)
Teodora Tatu
@oyeakhil really nice product, I can start learning code too now, easy to use features!!
Arnau Ros
Great product guys! I can't wait to see this out in nearly every dribbble project! 😁
Zoltán Szőgyényi
Maker
@arnau_ros thank you, Arnau! We also have a figma version in the works 😉
Paul Laros 🇳🇱
The Themesberg team nailed it again! 🔥 Congrats on the launch @roberttanislav & @zolidev
Sm0ke
Looks amazing! 🚀🚀
Tanislav Robert
Maker
@achirilov thank you
Victor Cordos
Congrats @themesberg, it looks really great! Can't wait to use this library!!
Zoltán Szőgyényi
Maker
@themesberg @victor_cordos thank you, Victor!
David J. Kim
Can't believe I missed this yesterday. This looks fantastic! Would love to use this on our website.
Vidu
This is pretty cool. Does this work with tools like bubble etc?
Zoltán Szőgyényi
Maker
@vidu_s Thanks! Well, it's just plain old CSS. If the tool lets you add custom CSS style, it should work with anything!
Joel Hansen
Great layout, looking forward to following the launch!