Glassmorphism CSS: How to Make a Frosted Glass Effect

2 min read by Mohammad Shoeb

Glassmorphism CSS: How to Make a Frosted Glass Effect

Glassmorphism is the frosted glass effect you see on modern app panels: a translucent card that blurs whatever sits behind it. The CSS behind it is short, but the values are fiddly to tune by hand. Here is how the effect works and how to generate it in seconds.

What makes the frosted glass effect

A glassmorphism card is built from four layers working together:

  • A backdrop blur using backdrop-filter: blur(), which softens the content sitting behind the element.
  • A semi-transparent background using rgba() so the blurred content shows through with a tint.
  • A subtle border, usually a faint white line, to catch the light at the edge.
  • A soft shadow to lift the card off the page.

Here is a typical declaration:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

The key thing to remember is that the blur acts on whatever is behind the element, so glassmorphism only looks like glass when there is content underneath it. Put a flat solid color behind the card and there is nothing to frost.

Generate the CSS in your browser

Hand-tuning blur radius against transparency against border opacity is slow. The Glassmorphism CSS Generator gives you sliders and a live preview so you can see the glass over real content as you adjust.

  1. Open the Glassmorphism CSS Generator.
  2. Drag the blur slider to set how strong the frosting looks.
  3. Adjust transparency until the background tint feels right.
  4. Tune the border and shadow to lift the card off the page.
  5. Click copy and paste the CSS straight into your stylesheet.

Everything runs client-side in your browser. No upload, no account, nothing sent to a server.

Browser support and performance

backdrop-filter is now supported across current versions of Chrome, Edge, Firefox, and Safari, but older browsers ignore it. Because of that, always set a slightly more opaque rgba() background as a fallback so the card stays readable even when the blur does not render.

Blur is also one of the more expensive things you can ask a browser to paint. It is fine on a card or two, but stacking many blurred elements, or animating them, can drop your frame rate on lower-powered devices. Use it where it earns the look, not everywhere.

Pick a busy background, set your blur and transparency, copy the CSS, and your frosted glass is done.

CSSDesignHow-to

← All posts