Backgrounds & Color · Free generator

CSS Glassmorphism Generator

Free · no sign-up Live preview · copy or download the CSS

Frosted-glass panels floating over color — the glassmorphism look in one card: backdrop blur, translucent white fill, a light catching border. Tune it live over a gradient backdrop and copy the CSS.

Settings

glass panel
Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 15 minCSS Colorsrgba() transparency — the fill and border are all alpha.STEP 2 · 20 minCSS BackgroundsWhat the glass blurs: layered backdrops.STEP 3 · 15 minCSS ShadowsThe lift shadow that separates pane from backdrop.


  1. CSS Gradient GeneratorBackgrounds & Color
  2. CSS Noise Texture GeneratorBackgrounds & Color
  3. CSS Box Shadow GeneratorShadows & Effects
  4. CSS Border Radius GeneratorShape & Layout
  5. CSS Layer Styles GeneratorShadows & Effects
  6. CSS Button GeneratorTypography & Buttons


How it works


Three ingredients make glass: backdrop-filter: blur() frosts whatever lies behind the panel; a translucent rgba() white fill catches light without hiding the backdrop; a low-opacity white border reads as the pane's polished edge. A soft drop shadow lifts it off the surface.


Glass only works when there's something worth blurring — a gradient, photo or busy pattern behind it. Over flat gray it just looks like a gray box. This site's header and sidebar are this exact recipe over the gradient canvas.


Run the code — try it yourself
The card is solid white and hides the gradient. Make it glass: rgba fill at .25, 10px backdrop blur (with -webkit-), a 1px rgba(255,255,255,.4) border.


exercise.html — editable


Frequently asked questions
The blur does nothing — why?
backdrop-filter needs something behind the element to blur, and the element itself must be translucent. A solid background hides the effect entirely.
Which browsers support backdrop-filter?
All modern ones; Safari still wants the -webkit- prefix, which the generator includes.
Text on glass is hard to read.
Raise the fill opacity, add a subtle dark text-shadow, or increase the blur so the backdrop calms down — contrast against the busiest area behind the panel.
Is it expensive to render?
Blur is the priciest filter; fine for a header or a few cards, risky for dozens of animated panels. Test on a mid-range phone.


Keep going
Glass is atmosphere, not structure — one or two panes per screen, always over something colorful. Build the backdrop first in the Gradient generator, and understand the alpha channel doing the work in the Colors lesson.
CSSmatic is a non-profit project, made by developers for developers.