CSS Gradient
Focus: gradients and colour. Shares css and generator with css.glass. Rated 4.5 (css.glass: 4.4).
Web AppFreeWeb
4.5Visit
Web App
css.glass
A generator for glassmorphism effects with copy-ready CSS.
Rating
4.4 / 5
Pricing
Free
Difficulty
Beginner
Works on
Web
Built with love by Shushant Lakhyani. Building bestproductivityresources.com
What is css.glass?
css.glass lets you tweak blur, transparency, colour and outline to build frosted-glass card effects, with a live preview over a background image. When it looks right you copy the CSS into your project, and the tool is free to use in the browser.
Pros: what css.glass does well
- Live preview while you tweak
- Copy-ready CSS
- Free, no signup
Cons: where it falls short
- Single-purpose tool
- Glass effects can hurt contrast if overused
Who css.glass is for
Designers and developers adding frosted-glass cards to a UI.
Who can skip it
People who are not building websites or apps.
css.glass alternatives
Not sold on css.glass? These do a similar job, and each card says what it has in common.
Fancy Border Radius
Focus: shapes and border-radius. Shares css and generator with css.glass. Rated 4.5 (css.glass: 4.4).
Web AppFreeWeb
4.5Visit
CSS Toggle Library
Focus: toggles, switches and checkboxes. Shares css and ui with css.glass. A website, not a web app. Rated 4.7 (css.glass: 4.4).
WebsiteFreeWeb
4.7Visit
css.gg
Focus: icons and svg. Shares css and ui with css.glass. A website, not a web app. Rated 4.5 (css.glass: 4.4).
WebsiteFreeWeb
4.5Visit
CSS Buttons
Focus: buttons, tailwind and front-end. Shares css and ui with css.glass. A website, not a web app. Rated 4.3 (css.glass: 4.4).
WebsiteFreeWeb
4.3Visit
Clippy
Focus: clip-path, shapes and web design. Shares css with css.glass. Rated 4.6 (css.glass: 4.4).
Web AppFreeWeb
4.6Visit
Free alternatives to css.glass
Want to spend nothing? These free picks cover similar ground.
CSS Grid Generator
Focus: css grid, layout and front end. Shares generator with css.glass. Rated 4.6 (css.glass: 4.4).
Web AppFreeWeb
4.6Visit
Layoutit Grid
Focus: css grid, layout and front-end. Shares generator with css.glass. Rated 4.6 (css.glass: 4.4).
Web AppFreeWeb
4.6Visit
UI Colors
Focus: color palette, tailwind css and ui design. Shares css with css.glass. Rated 4.6 (css.glass: 4.4).
Web AppFreeWeb
4.6Visit
Wakamai Fondue
Focus: fonts, opentype and typography. Shares css with css.glass. Rated 4.6 (css.glass: 4.4).
Web AppFreeWeb
4.6Visit
BGJar
Focus: svg, backgrounds and web design. Shares generator with css.glass. Rated 4.5 (css.glass: 4.4).
Web AppFreeWeb
4.5Visit
ASCIInator
Focus: ascii art, images and svg. Shares generator with css.glass. Same 4.4 rating.
Web AppFreeWeb
4.4Visit
Are you the maker of css.glass?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.
Free Notion database
1,100+ ways people are making money online
Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.
Get the free databaseFree Notion database
399+ ways to make money online
Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.
Get the free listFor research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.
Weekly newsletter
Everything new, every Monday.
One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.
Join the newsletterYou sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.