CSS

CSS Glass Effect (Frosted Glass with backdrop-filter)

The CSS glass effect (also called frosted glass or glassmorphism) makes an element look like a sheet of blurred glass sitting on top of the background. It takes three things: a semi-transparent background, backdrop-filter: blur(), and a thin light border.

Here’s a ready-to-use version you can copy into your project.

Demo:

<div class="glass-demo">
    <div class="glass-demo__card">
      <h4>Frosted glass</h4>
      <p>The background behind this card is blurred with backdrop-filter.</p>
    </div>
  </div>

.glass-demo {
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 40px 20px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 20% 30%, #4f7cff 0 18%, transparent 19%),
      radial-gradient(circle at 80% 70%, #22d3ee 0 20%, transparent 21%),
      radial-gradient(circle at 65% 20%, #a78bfa 0 12%, transparent 13%),
      #0f172a;
  }

  .glass-demo__card {
    max-width: 320px;
    padding: 24px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .glass-demo__card h4 {
    margin: 0 0 8px;
    font-size: 20px;
  } 
  
  .glass-demo__card p {
    margin: 0;
    opacity: 0.85;
  }

Frosted glass

The background behind this card is blurred with backdrop-filter.

How the glass effect works

background: rgba(255, 255, 255, 0.12): a mostly transparent white, so the colors behind show through.
backdrop-filter: blur(12px): blurs everything behind the element. This is what makes it look like frosted glass. More blur looks more frosted.
border: 1px solid rgba(255, 255, 255, 0.25): a light edge that catches the light like the rim of a glass pane.
box-shadow: lifts the card off the background.

The effect only shows up on top of something colorful. On a plain white or black background there’s nothing to blur. Make a colorful background with the CSS gradient generator.

Dark glass variant

For dark UIs, swap the white tint for a dark one and blur a bit more:

.glass-dark {
    color: #fff;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }

Browser support and fallback

backdrop-filter works in all modern browsers. Keep the <code>-webkit-</code> prefix for older Safari versions. For browsers without support, use a more opaque background so text stays readable:

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-demo__card {
      background: rgba(15, 23, 42, 0.85);
    }
  }

Want to tweak the blur, transparency and color visually? Use the Glassmorphism CSS Generator and copy the generated code.

Last updated

October 02, 2026

Views

145