20 CSS Text Gradient Effects 11 / 20

Glassmorphism Text Gradient Contrast

A backdrop-filter glass card over coloured blobs, with gradient text reinforced by drop-shadow to maintain legibility through the blur.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="tg-11">
  <!-- Colourful blobs behind glass -->
  <div class="tg-11__blob tg-11__blob--a" aria-hidden="true"></div>
  <div class="tg-11__blob tg-11__blob--b" aria-hidden="true"></div>
  <div class="tg-11__blob tg-11__blob--c" aria-hidden="true"></div>
  <div class="tg-11__glass">
    <p class="tg-11__eyebrow">— Featured Article</p>
    <h2 class="tg-11__title">Design <span class="tg-11__grad">Systems</span><br>That Scale</h2>
    <p class="tg-11__body">Gradient text on translucent surfaces needs careful colour management. The <code>background-clip: text</code> gradient must maintain ≥4.5:1 contrast against any colour that bleeds through the blur.</p>
    <div class="tg-11__meta">
      <span class="tg-11__avatar">JL</span>
      <div>
        <strong class="tg-11__author">Julia Lam</strong>
        <span class="tg-11__date">Jun 12 · 5 min read</span>
      </div>
    </div>
  </div>
</div>
.tg-11, .tg-11 *, .tg-11 *::before, .tg-11 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-11 ::selection { background:rgba(168,85,247,.6); color:#fff; }

.tg-11 {
  --g-a: #e879f9;
  --g-b: #818cf8;
  --g-c: #38bdf8;
  --blob-a: #a855f7;
  --blob-b: #ec4899;
  --blob-c: #06b6d4;
  --bg: #06030f;
  --glass: rgba(255,255,255,.07);
  --text: #f0e7ff;
  --muted: rgba(240,231,255,.55);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}

/* Background colour blobs */
.tg-11__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.tg-11__blob--a { width: 320px; height: 320px; background: var(--blob-a); top: -80px; left: -60px; }
.tg-11__blob--b { width: 280px; height: 280px; background: var(--blob-b); bottom: -60px; right: -40px; }
.tg-11__blob--c { width: 200px; height: 200px; background: var(--blob-c); top: 50%; left: 55%; transform: translate(-50%,-50%); }

/* Glass card */
.tg-11__glass {
  position: relative;
  z-index: 1;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 500px;
  width: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.tg-11__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 16px;
}

.tg-11__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 16px;
}

/*
  Contrast strategy: on a blurred translucent surface the background colours
  behind the card bleed through. We use a high-saturation gradient and apply
  a subtle text-shadow on the wrapper to ensure the gradient text reads clearly.
  The gradient direction is angled to maximise the perceived brightness range.
*/
.tg-11__grad {
  background: linear-gradient(110deg, var(--g-a) 0%, var(--g-b) 50%, var(--g-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 8px rgba(232,121,249,.4));
}

.tg-11__body {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.tg-11__body code {
  font-size: .8em;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--g-c);
}

.tg-11__meta { display: flex; align-items: center; gap: 12px; }
.tg-11__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g-a), var(--g-b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.tg-11__author { display: block; font-size: .875rem; font-weight: 700; color: var(--text); }
.tg-11__date { font-size: .775rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {}

How this works

The backdrop-filter: blur(20px) on the glass card blurs everything behind it — including the coloured blobs. This means the background perceived behind the gradient text is a smeared mix of the blob colours. To counteract this, the gradient uses high-saturation stops and an additional filter: drop-shadow(0 1px 8px rgba(232,121,249,.4)) that adds a bloom reinforcing the text against the varying luminosity behind it.

The three blob elements are positioned absolute with border-radius: 50% and filter: blur(60px). They sit at z-index: 0 while the card is at z-index: 1, ensuring the blur is applied to the blobs before the card composites on top. -webkit-backdrop-filter is included alongside the unprefixed property for Safari compatibility.

Customize

  • Reposition blobs by editing the top, left, right, and bottom values on each .tg-11__blob element to change which colours appear behind the card.
  • Increase backdrop blur from 20px to 40px for a more opaque frosted glass, or reduce to 8px for a sheer transparent effect where blob colours remain vivid.
  • Add a fourth blob with a contrasting hue by duplicating a blob element and positioning it top-right with an emerald or amber colour to enrich the background palette.
  • Adjust the gradient text bloom by editing drop-shadow(0 1px 8px rgba(232,121,249,.4)) — increase the blur radius to 16px or the alpha to .7 for more contrast on varied backgrounds.
  • Switch the card border from rgba(255,255,255,.12) to a gradient border using the pseudo-element mask technique for an extra premium feel that references the text gradient.

Watch out for

  • backdrop-filter: blur() is not supported in Firefox by default without enabling a flag (gfx.webrender.all=true). The card will render without the blur, appearing opaque — include a fallback background with higher opacity for Firefox users.
  • The -webkit-backdrop-filter prefix is required for older Safari versions. If you see a flat background in iOS Safari 14 or earlier, check that both the prefixed and unprefixed declarations are present and in the correct order (prefixed first).
  • The blob elements use position: absolute inside a position: relative parent. If the parent container is not explicitly sized or has overflow: hidden, the blobs may not be visible or may bleed outside the demo bounds.

Browser support

ChromeSafariFirefoxEdge
76+ 14+ 103+ 76+

backdrop-filter is not supported in Firefox without a flag; provide a higher-opacity solid background fallback for Firefox users.

More from 20 CSS Text Gradient Effects

CSS Text Gradient with Text Stroke OutlineCSS Text Gradient Fallback for Older BrowsersTailwind CSS Text Gradient Utility ClassesCSS Text Gradient on Multiline ParagraphCSS Text Gradient on Active Navigation LinkDark Mode vs Light Mode CSS Text GradientCSS Text Gradient Landing Page Hero TitleWeb3 Glowing Gradient Text CSSCSS Text Gradient Corporate Logo TextMinimalist Bold Text Gradient CSSCSS Hover Transition Text Gradient EffectGradient Text Button Link CSS
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →