Building a liquid glass card with CSS

#css #webdev #frontend #tutorial

A glass card can look great over a gradient and become unreadable the moment you put real content behind it. The blur is only one part of the effect. Tint, edge highlights and the backdrop matter just as much.

I built GradientDeck, formerly Gradienty.codes. Its liquid glass tool lets you adjust those pieces visually. Here’s a smaller, standalone CSS version you can use without the generator.

Start with something behind the glass

A flat background gives the filter very little to work with. This example uses two radial gradients so you can actually see the material.

<div class="scene">
  <article class="glass">
    <div class="glass-content">
      <h2>Make room for the good stuff.</h2>
      <p>A small glass card, built with plain CSS.</p>
    </div>
  </article>
</div>

.scene {
  min-height: 28rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse at 20% 25%, #0d9488, transparent 60%),
    radial-gradient(ellipse at 80% 75%, #7c3aed, transparent 60%),
    #0f172a;
}

.glass {
  position: relative;
  width: min(100%, 24rem);
  box-sizing: border-box;
  padding: 2rem;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 1.75rem;
  background: #172033;
  color: #fff;
  box-shadow:
    0 20px 70px rgb(0 0 0 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 35%),
    inset 0 -1px 0 rgb(255 255 255 / 8%);
}

@supports ((backdrop-filter: blur(1px)) or
           (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 48%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
}

.glass-content {
  position: relative;
  z-index: 1;
}

.glass h2 { margin: 0 0 0.75rem; }
.glass p { margin: 0; line-height: 1.6; }

The card starts with a solid background. Browsers that support backdrop filtering get the translucent version through @supports.

Add a highlight without washing out the text

The thin border defines the silhouette. The inset shadows catch the upper and lower edges. A separate highlight layer adds a little sheen:

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 14%),
    transparent 45%
  );
}

Keep the highlight subtle. A bright white overlay across the entire card quickly makes the surface look cloudy.

Tune it in this order

Backdrop: put the card over the actual page or image you plan to use.
Tint: increase the background alpha until the text is comfortable to read.
Blur: soften distracting detail without losing all the color behind it.
Highlights: add enough light to define the edges.

A blur value alone won’t guarantee readable text. Check the card over both the brightest and busiest parts of the background, especially if content scrolls underneath it.

When nothing seems to blur

First, check that the card’s background is translucent and that there is something behind it.

Then inspect its ancestors. A parent with opacity below 1, a filter, a mask or its own backdrop filter can limit which pixels the child samples. Nested glass panels are a common place to encounter this. MDN explains the behavior in its backdrop-filter reference.

Use an alpha background color to make the surface translucent. Setting opacity on the whole card also fades its text and children.

Give people a solid option

Where the browser exposes the reduced-transparency preference, you can honor it with an opaque surface:

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: #172033;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .glass::before { display: none; }
}

This also removes the decorative highlight. It doesn’t replace checking contrast in the default design.

For performance, start with one filtered surface. Avoid animating the blur radius, and be cautious about adding several overlapping blur layers to every card in a scrolling list. Check the result on the devices your readers actually use.

Try the settings visually

GradientDeck’s liquid glass generator has 20 presets, editable material controls and CSS and Tailwind CSS v4 exports. It’s free and doesn’t require an account. You can also preview the glass over an image from your device.

The example above recreates a glass-like appearance with CSS; it doesn’t implement optical refraction. Start simple, put it over your real UI, and let readability decide how transparent it should be.

DEV Community