CSS Glassmorphism Generator

Glassmorphism only works when there is something behind the element to blur. Over a flat colour the effect vanishes, so place the card over a photograph, gradient or busy background. The saturate function is what separates a convincing result from a grey smear: blurring alone washes colour out, and pushing saturation slightly above 100% restores it. Be deliberate about performance and accessibility. backdrop-filter forces the browser to composite on the GPU, so animating it or stacking several glass layers can cost real frames on mid-range phones. Text contrast also changes with whatever sits behind the card, so check the worst case against the 4.5:1 ratio WCAG requires for body text.

The effect combines four properties: a semi-transparent background using rgba, a backdrop-filter with blur and optional saturate, a one-pixel border in a slightly more opaque version of the tint, and a large soft box-shadow to lift the surface off the page.

The effect only appears when there is something behind the element to blur — over a flat colour it disappears. backdrop-filter is GPU-intensive, so animating it or stacking several glass layers can cost frames on lower-end devices, and text contrast changes with whatever sits behind the card.

A white tint at 25% opacity with a 12px blur, 120% saturation, a 16px radius and a soft shadow produces the classic frosted card — background: rgba(255, 255, 255, 0.25) with backdrop-filter: blur(12px) saturate(120%).

1. Pick a tint colour — white for light themes, a dark shade for dark ones.
2. Adjust opacity and blur until the backdrop reads as frosted, not muddy.
3. Raise saturation slightly so colours behind the glass stay vivid.
4. Copy the CSS and apply the class to your element.

• Placing the card over a flat colour, where there is nothing to blur.
• Omitting -webkit-backdrop-filter, which older Safari still needs.
• Setting opacity so high the effect turns into a plain translucent box.
• Ignoring text contrast over a busy or light background.

The CSS Glassmorphism Generator builds the frosted-glass effect popularised by macOS and iOS: a translucent tinted surface with a blurred backdrop, a subtle light border and a soft shadow. Adjust the sliders, watch the preview, and copy production-ready CSS with the -webkit- prefix included.

Front-end developers and UI designers building modern card, modal and navigation-bar surfaces.

• Live preview over a gradient, so you see the blur actually working.
• Derives a matching border tint automatically instead of leaving it flat.
• Includes the -webkit-backdrop-filter prefix for Safari.
• Saturation control, which is what makes the effect look like real glass.

• Designing a translucent card or pricing panel over a hero image.
• Building a sticky navigation bar that blurs the content behind it.
• Styling a modal overlay or notification toast.
• Prototyping a dashboard widget with depth.