Glassmorphism and gradients: a practical guide

Glassmorphism is a design style built from frosted glass: translucent panels that blur whatever sits behind them, layered over a colourful background, usually a gradient. The panel keeps a hint of the colour underneath, a thin bright edge catches the light, and the whole interface feels layered and physical. Operating systems have used translucent materials for years, and in 2025 Apple made glass the centre of its new Liquid Glass design language, so the look is not going away. Used carelessly, though, it produces grey boxes and unreadable text.

Why glassmorphism needs a gradient

Frosted glass only looks like glass when there is something colourful behind it to blur. Over a flat white or grey background, a glass panel is just a slightly different grey. Over a rich gradient, with pools of colour at different points, the panel picks up soft colour that shifts from one edge to the other, and that shift is what the eye reads as glass. So the gradient is not decoration: it is half of the effect.

The best glass backgrounds have strong, separate areas of colour and a dark or deep base, much like mesh gradients or aurora gradients. Place the brightest pool so it sits partly behind a panel; the panel will glow where it overlaps.

The CSS behind glassmorphism

The core of the effect is backdrop-filter, which applies a filter to everything behind an element rather than to the element itself. Combine it with a semi-transparent fill, a thin translucent border and a soft shadow. Current versions of the major browsers support it, and older Safari versions need the -webkit- prefix; see MDN on backdrop-filter and caniuse.

.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}

Glassmorphism and contrast

The biggest problem with glass is that its text sits on whatever is behind the panel. A heading that reads well over a dark indigo area may vanish when the panel scrolls over a pale pink glow. Contrast has to hold in the worst case, not the one in your mockup. WCAG asks for 4.5:1 for body text; check it at the lightest point that can ever sit behind the words.

A reliable trick is to tint the glass towards the darkest colour in the background rather than using white. A dark, 50% indigo glass over an indigo and pink gradient keeps white text readable everywhere, while still showing the colour through. For more ways to keep words clear, see text on a gradient.

When glassmorphism helps, and when it doesn't

• Helps: floating navigation, dialogs, media controls, cards over a hero and lock-screen style widgets, where the layer needs to feel above the content
• Helps: product and launch pages where the gradient is the brand and the glass shows it off
• Hurts: forms, tables and long reading, where people need calm, constant contrast
• Hurts: pages with many stacked glass layers, which look muddy and cost performance
• Hurts: anywhere the background is flat or busy with photos and small text

How to design a glass interface

1. 1

   Design the background first

   Choose a gradient with separate pools of colour on a deep base. The glass will only be as good as what is behind it.

2. 2

   Limit glass to one or two layers

   Navigation and one level of cards is plenty. Glass on glass on glass turns grey.

3. 3

   Blur enough to dissolve detail

   If you can still make out shapes behind the panel, increase the blur before anything else.

4. 4

   Tint for contrast

   Choose the fill colour and opacity that keep text readable over the lightest part of the background.

5. 5

   Add a light edge and a soft shadow

   A 1 px translucent border and a wide, faint shadow make the panel read as a physical sheet.

6. 6

   Test performance on a phone

   Backdrop blur is expensive to draw. Keep blurred areas modest and avoid animating them on large surfaces.

Glass is one of several materials a gradient can wear; gradient texture compares it with grain, paper and silk. If you want a background that already has the pools, depth and light glass needs, many Marks in the Market are built that way, and you can design with any of them for free.