20 CSS Text Gradient Effects 04 / 20

Minimalist Bold Text Gradient CSS

An editorial type specimen showcasing dual-tone gradients on heavy 900-weight fonts at multiple sizes for maximum impact.

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

The code

<div class="tg-04">
  <div class="tg-04__inner">
    <p class="tg-04__kicker">TYPE SCALE SPECIMEN</p>
    <h1 class="tg-04__word" data-text="Clarity">Clarity</h1>
    <h2 class="tg-04__word tg-04__word--two" data-text="Purpose">Purpose</h2>
    <h3 class="tg-04__word tg-04__word--three" data-text="Impact">Impact</h3>
    <div class="tg-04__rule"></div>
    <p class="tg-04__caption">Dual-tone linear gradients on heavy weights create editorial impact without imagery. The gradient stop travels left-to-right, producing a colour shift that reads clearly at every size.</p>
  </div>
</div>
.tg-04, .tg-04 *, .tg-04 *::before, .tg-04 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-04 ::selection { background:#1e1b4b; color:#e0e7ff; }

.tg-04 {
  --g-a: #1e1b4b;
  --g-b: #6366f1;
  --g-a2: #312e81;
  --g-b2: #a21caf;
  --g-a3: #0f172a;
  --g-b3: #0ea5e9;
  --bg: #ffffff;
  --muted: #64748b;
  --rule: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.tg-04__inner { max-width: 640px; width: 100%; }

.tg-04__kicker {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Shared gradient text mixin pattern. Use inline-block so the
   element's box width equals its glyph width — combined with
   background-clip:text this guarantees the gradient paints inside
   the glyph shape (not as a full-width bar across the block). */
.tg-04__word {
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  padding: 0 .05em .1em; /* prevents descender clipping in Firefox */
}
.tg-04__inner > .tg-04__word { display: block; }
.tg-04__inner > .tg-04__word + .tg-04__word { margin-top: 4px; }

.tg-04__word { font-size: clamp(4rem, 14vw, 7.5rem); background-image: linear-gradient(90deg, var(--g-a) 0%, var(--g-b) 100%); }
.tg-04__word--two { font-size: clamp(3rem, 10vw, 5.5rem); background-image: linear-gradient(90deg, var(--g-a2) 0%, var(--g-b2) 100%); }
.tg-04__word--three { font-size: clamp(2rem, 7vw, 3.75rem); background-image: linear-gradient(90deg, var(--g-a3) 0%, var(--g-b3) 100%); }

.tg-04__rule {
  height: 1px;
  background: var(--rule);
  margin: 28px 0;
}

.tg-04__caption {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
}

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

How this works

Each headline word is a separate h element with its own background: linear-gradient(90deg, …) and the trio of background-clip text declarations. Because the gradient is applied per-element rather than per-page, each word has its own independent colour pair — the first using indigo-to-violet, the second purple-to-pink, the third navy-to-sky.

Using extremely heavy font weights (900) maximises the area of visible gradient per character, making the colour transition more readable at all sizes. The clamp() on font-size means the gradient proportions remain visually balanced whether the text renders at 4rem on mobile or 7.5rem on wide viewports.

Customize

  • Introduce a third word by duplicating a heading element and adding a new colour pair via --g-a3 / --g-b3 to maintain the systematic palette approach.
  • Try linear-gradient(45deg, …) instead of 90deg on one word for a diagonal slice that contrasts with the horizontal ramps on neighbouring words.
  • Animate the gradient by adding background-size: 200% and a background-position keyframe animation on hover for a premium shimmer effect on rollover.
  • Change font-family to 'Georgia', serif for an editorial feel — serif strokes at heavy weights expose wider gradient surface area per character.
  • Remove the rule divider and collapse the words into a single container with display: flex; flex-direction: column; gap: 0 for a tighter stacked logotype treatment.

Watch out for

  • Very heavy font weights (900) combined with large font sizes can cause the gradient to be partially clipped at the descender line in Firefox — add padding-bottom: 0.1em to the gradient element to prevent cut-off descenders.
  • The clamp() function used for responsive sizing is not supported in IE11 — add a fixed font-size fallback before the clamp() declaration: font-size: 3rem; font-size: clamp(…).
  • If the gradient appears to not render at all, check that the element has a non-zero width — inline elements like span with no text content have zero width and the gradient background has nothing to clip to.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

clamp() requires Chrome 79+, Safari 13.1+, Firefox 75+ — provide a px fallback font-size before the clamp() declaration.

More from 20 CSS Text Gradient Effects

CSS Text Gradient Corporate Logo TextCSS Hover Transition Text Gradient EffectGradient Text Button Link CSSAnimated Moving Text Gradient Background CSSCyberpunk Neon Text Gradient CSSMetallic Gold Text Gradient Effect CSSGlassmorphism Text Gradient ContrastPastel Soft Color Text Gradient CSSVertical Linear Gradient Text CSSRadial Gradient Text Effect CSSMulti Color Rainbow Text Gradient CSSCSS Text Gradient with Text Stroke Outline
View the full collection →

Search CodeFronts

Loading…

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