Glassmorphism CSS Generator
Generate the CSS for frosted glass effect for free.
Glassmorphism CSS Generator launched on February 2, 2021 with 187 votes, #143 of 3,133 launches that month and more than 90% of that year's launches. The site was still online in September 2026, 5 years on.
What it does
The "frosted glass" effect has been with us for quite some time with each company having its own name for it. In Nov 2020 Mike Malewicz wrote a medium article trying to unify it under one name. Then we created this handy CSS generator. Enjoy!
Glassmorphism is a unified name for the popular Frosted Glass aesthetic.
Glassmorphism is a design style, coined by Michal Malewicz from Hype4.Academy to connect and combine all of the uses of the “frosted glass” effect in the UI. By categorizing it and giving it a common name, it became easier to find and learn about it from resources all around the web. After the initial article, written in November of 2020, the trend and the name exploded online, with its own #glassmorphism hashtag and thousands of UI exercises created in this style. You can read the original article here , at the academy as well. For just $10/month you can get guided challenges and AI design feedback, your individual -40% promo code on all courses, premium articles, videos and invitation to…from hype4.academy
Does a similar job
all alternatives →
CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…
Aether CSS2025 · aethercss.lovable.app · ▲10Free Liquid Glass, Glassmorphism & Neumorphism CSS Generator
Glassmorphic CSS Generator2021 · css.glass · ▲3Quickly design and generate glassmorphic-styled CSS rules.
Pixelied Color Palette Generator2024 · pixelied.com · ▲259Pick, edit & visualize - your free palette generator tool
More dev tools this month
the category →
open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.
Dev tools · 27d ago · github.com
Contribute to reladraw/reladraw development by creating an account on GitHub.
Dev tools · 25d ago · github.com
OpenBot▲362Grok Bot alternative: free, local, open-source, multiplayer
Dev tools · 22d ago · openbot.run
Talanoa▲341Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…
Dev tools · 20d ago · talanoa.email
CoreSpeed▲332One MCP for everything your agents need: apps, memory, tools
Dev tools · 28d ago · corespeed.io
Source: Product Hunt launch ↗
Launched alongside, February 2021
the whole month →- RS
Life & fun · 2021 · justine.lol
Contribute to DidierRLopes/GamestonkTerminal development by creating an account on GitHub.
Dev tools · 2021 · github.com
Contra▲798Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.
Commerce · 2021 · contra.com
