20 CSS Text Gradient Effects 14 / 20

Radial Gradient Text Effect CSS

Four radial-gradient text examples where the brightest colour radiates from the centre of each character, fading toward the edges.

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

The code

<div class="tg-14">
  <div class="tg-14__wrapper">
    <h1 class="tg-14__big tg-14__radial-a">Radiate</h1>
    <h2 class="tg-14__med tg-14__radial-b">Energy outward</h2>
    <div class="tg-14__card-row">
      <div class="tg-14__card">
        <h3 class="tg-14__card-h tg-14__radial-c">Expand</h3>
        <p>Radial gradients grow from a central point, making text feel like it emanates light.</p>
      </div>
      <div class="tg-14__card">
        <h3 class="tg-14__card-h tg-14__radial-d">Focus</h3>
        <p>A darker perimeter naturally draws the eye to the bright centre of the letterforms.</p>
      </div>
    </div>
    <p class="tg-14__code-hint"><code>radial-gradient(circle at 50% 50%, …)</code></p>
  </div>
</div>
.tg-14, .tg-14 *, .tg-14 *::before, .tg-14 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-14 ::selection { background:#7c3aed44; color:#fff; }

.tg-14 {
  --center-a: #fde68a;
  --edge-a: #f59e0b;
  --center-b: #c4b5fd;
  --edge-b: #7c3aed;
  --center-c: #7dd3fc;
  --edge-c: #1d4ed8;
  --center-d: #fbcfe8;
  --edge-d: #be185d;
  --bg: #09080f;
  --surface: rgba(255,255,255,.04);
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(255,255,255,.07);
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
}

.tg-14__wrapper { max-width: 620px; width: 100%; text-align: center; }

/*
  Radial gradient text: circle at 50% 50% places the brightest colour at
  the exact centre of the element's bounding box. As the gradient clips
  to the text, the middle of each character glows and edges fade.
  Adjust the first stop percentage to control the glow spread.
*/
.tg-14__radial-a {
  background: radial-gradient(circle at 50% 50%, var(--center-a) 0%, var(--edge-a) 65%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tg-14__radial-b {
  background: radial-gradient(ellipse at 40% 60%, var(--center-b) 0%, var(--edge-b) 75%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tg-14__radial-c {
  background: radial-gradient(circle at 50% 40%, var(--center-c) 0%, var(--edge-c) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tg-14__radial-d {
  background: radial-gradient(circle at 50% 40%, var(--center-d) 0%, var(--edge-d) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.tg-14__big {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 8px;
}
.tg-14__med {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 32px;
}
.tg-14__card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
  text-align: left;
}
.tg-14__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.tg-14__card-h { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
.tg-14__card p { font-size: .825rem; color: var(--muted); line-height: 1.6; }

.tg-14__code-hint { font-size: .8rem; color: var(--muted); }
.tg-14__code-hint code {
  background: rgba(255,255,255,.06);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: .78rem;
  color: #c4b5fd;
}

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

How this works

Radial gradients place the circle at 50% 50% keyword at the brightest centre stop and fade outward to a deeper version of the same hue. When background-clip: text is applied, the gradient is clipped to the letterform bounding box, so the centre of the overall word — not each individual character — is the luminous point. Adjusting the first stop's percentage controls how quickly the glow spreads.

Using ellipse instead of circle stretches the gradient horizontally, matching the natural wider-than-tall aspect ratio of most text strings. An off-centre focal point — e.g. ellipse at 40% 60% — creates an asymmetric glow that implies a directional light source, adding realism to the illumination metaphor.

Customize

  • Change the radial focal point by editing circle at 50% 50% to circle at 20% 50% — this shifts the brightest spot to the left edge of the word, implying side-lit illumination.
  • Swap circle for ellipse 70% 50% to create a wider horizontal glow that better matches the aspect ratio of long words like 'Expand' or 'Platform'.
  • Add a pulsing animation to the radial gradient by applying background-size: 150% 150% and an oscillating background-position keyframe that moves the centre between 40% and 60%.
  • Use radial-gradient text for price or stat callouts — numbers with radial gradients look especially striking as a KPI metric where the value needs to glow from the centre outward.
  • Darken the outer stop from the hue's dark shade to pure black (#000) for a spotlight effect where the edges of long words fade completely into the background.

Watch out for

  • When the element containing radial-gradient(circle at 50% 50%) resizes — e.g. on viewport change — the gradient updates responsively because it is sized to the element's computed box. However, the visual centre of the glow can jump if the element aspect ratio changes abruptly.
  • Very small radial centre percentages like circle at 5% 50% can place the gradient origin outside the visible text area, resulting in what appears to be a uniform flat colour on the right side of the word. Always preview at the largest expected font size.
  • The filter: drop-shadow() on radial gradient text elements should not exceed blur-radius: 20px or the rasterised layer size expands significantly beyond the element bounds, increasing paint area and reducing scroll performance.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

radial-gradient with background-clip:text is widely supported; the ellipse keyword works in all modern engines but may require a polyfill for edge cases in IE11.

More from 20 CSS Text Gradient Effects

Tailwind 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 CSSAnimated Moving Text Gradient Background CSSCyberpunk Neon Text Gradient CSS
View the full collection →

Search CodeFronts

Loading…

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