Open menu

CSS Glassmorphism Generator

Design frosted glass panels and preview them over six backgrounds, from aurora and sunset gradients to photos. Adjust blur, tint color and opacity, saturation, edge highlight, radius, shadow and an optional grain texture. The export includes a fallback for browsers without backdrop-filter, and the contrast check tests your text over light and dark parts of the background.

Preset gallery
Glass cardFrosted panels blur whatever sits behind them.

Accessibility checks

  • Pass Text keeps at least 6.2:1 contrast over the blurred background, including its lighter and darker areas.
  • Pass Browsers without backdrop-filter get a nearly opaque background instead, so text stays readable.
  • Pass A 16px blur is light enough for smooth scrolling.

Export code

.glass {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.85);
  }
}
Favourites on this device (0)

No favourites yet.

Glass
Tint
Edge, shape & text
Preview background

How to use the glassmorphism generator

  1. Pick a preset: light frosted glass, dark smoke, tinted colors, grain textures or shape variations.
  2. Choose a preview background that resembles what will sit behind the panel on your site.
  3. Tune the glass: tint color and opacity, blur strength and saturation. Grain adds a subtle texture.
  4. Shape the edge: border color and opacity, corner radius and shadow.
  5. Set the text color and watch the contrast check.
  6. Copy CSS, SCSS or Tailwind.

Getting glass right

  • It needs something behind it. Glass over a flat color just looks grey. Place it over images, gradients or shapes.
  • Use saturation. A 150–200% saturation boost keeps colors behind the glass vivid instead of muddy.
  • Use a light edge. A 1px border in white at 20–40% opacity catches the light and defines the shape.
  • Choose an opacity. Light tints work at 10–30%; dark tints need 40–70% to keep text readable.

Accessibility

Translucent backgrounds are the main risk: text that passes over a dark part of a photo can fail over a bright part. Test the panel over the real content, and keep important text on panels with enough tint opacity.

How it works

The frosted look comes from backdrop-filter, which blurs and adjusts whatever sits behind the panel. A semi-transparent background tint, a thin light border and an optional grain texture make the glass edge readable. Browsers without backdrop-filter get a more opaque fallback background through an @supports rule, so text stays legible. The contrast check measures your text against the tint over the preview background, which is why it changes when the background does.

Worked examples

Example 1: a login card over a photo

Load iOS and choose the Photo background. A 55% white tint with a 30px blur and 200% saturation keeps the scene visible but calm, and dark text easily passes contrast. Increase the radius to 28px for a modern, app-like look.

Example 2: a navigation bar over a gradient hero

Load Frosted with the Sunset background, lower the radius to 0 and the shadow to 0. Stick it to the top of the page with position: sticky. As content scrolls underneath, the blur keeps the menu readable. Check contrast over both the lightest and darkest part of your hero image.

Example 3: a dark dashboard widget

Load Smoke on the Aurora background. A 45% navy tint with a faint white edge works well on dark themes. Add the grain texture for a subtle, tactile surface that hides banding in the blurred background.

Common mistakes

  • Too little tint: 5–10% opacity looks great in a mockup but fails contrast on busy photos.
  • Glass on glass: stacked translucent panels get muddy; give inner elements solid backgrounds.
  • Forgetting the fallback: without it, older browsers show a see-through panel.

Frequently asked questions

How does the glass effect work?

backdrop-filter applies a filter, usually blur and a saturation boost, to whatever is behind the element. A semi-transparent tint and a thin light border on top make it read as frosted glass.

What happens in browsers without backdrop-filter?

The export includes an @supports not (backdrop-filter) block that makes the background nearly opaque, so text stays readable even without the blur. All current major browsers support backdrop-filter; the -webkit- prefix is included for older Safari.

Why does text contrast change with the background?

Glass is translucent, so the color behind it shows through. The blur averages the background, so the check estimates the glass over that average and over areas leaning towards the lightest and darkest colors, then reports the weakest result. Increase the tint opacity if text fails over part of it.

Is glassmorphism slow?

The browser must re-blur the background whenever it changes, for example while scrolling. Small and medium panels are fine. Very large blurs over full-screen areas can slow down low-end phones.

Does glassmorphism work on a plain background?

Not really. The frosted effect blurs what's behind the panel, so it needs a colourful or detailed background, such as a gradient or photo, to be visible.

Sources