I wanted a quick way to prototype glass UI elements without constantly jumping into my browser's dev tools to tweak opacities, blurs, and RGB border strokes.
So I put together Glass Forge Studio. It’s a completely free, lightweight workspace built with vanilla JS and CSS to help you visually design frosted-glass elements.
I just pushed a massive update to it, bringing in some highly requested features:
🖼️ Custom Image Sandbox: Drag and drop your own local images directly into the browser to see exactly how the glass effect looks over your specific project assets. (Everything happens locally, no server uploads).
⚡ Tailwind CSS Output: You can now toggle between grabbing standard vanilla CSS or instantly copying production-ready Tailwind utility classes.
💾 State Memory: Your sliders and colors are saved locally, so if you accidentally close the tab, you won't lose your exact layout.
🌌 Ambient Presets: Quickly test your containers against some clean, built-in gradient backgrounds.
You can tweak the parameters visually and grab the exact code you need with one click.
Check it out and let me know what you think
Use the Glass Forge Studio Tailwind CSS Tool here: glassforgestudio.netlify.app
Top comments (0)