20 CSS Text Gradient Effects 01 / 20

CSS Text Gradient Landing Page Hero Title

A sophisticated dark-mode hero section demonstrating the core background-clip text gradient technique for high-impact H1 headlines.

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

The code

<div class="tg-01">
  <div class="tg-01__hero">
    <div class="tg-01__badge">NOW AVAILABLE</div>
    <h1 class="tg-01__title">Build Products<br><span class="tg-01__grad">Users Love</span></h1>
    <p class="tg-01__sub">Design systems, prototypes, and production-grade components—all in one collaborative workspace.</p>
    <div class="tg-01__cta-row">
      <button class="tg-01__btn tg-01__btn--primary">Start for free</button>
      <button class="tg-01__btn tg-01__btn--ghost">View demo →</button>
    </div>
    <div class="tg-01__stats">
      <div class="tg-01__stat"><strong>50K+</strong><span>Developers</span></div>
      <div class="tg-01__stat"><strong>4.9★</strong><span>Rating</span></div>
      <div class="tg-01__stat"><strong>99.9%</strong><span>Uptime</span></div>
    </div>
  </div>
</div>
.tg-01, .tg-01 *, .tg-01 *::before, .tg-01 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-01 ::selection { background:#6c3fe4; color:#fff; }

.tg-01 {
  --g-from: #a855f7;
  --g-via: #6366f1;
  --g-to: #06b6d4;
  --bg: #080b14;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: rgba(255,255,255,.08);
  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;
}

.tg-01__hero {
  max-width: 680px;
  text-align: center;
}

.tg-01__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--g-from);
  border: 1px solid rgba(168,85,247,.35);
  background: rgba(168,85,247,.08);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 24px;
}

.tg-01__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -.03em;
}

/* The gradient text technique: background-clip + transparent text */
.tg-01__grad {
  background: linear-gradient(135deg, var(--g-from) 0%, var(--g-via) 50%, var(--g-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-01__sub {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}

.tg-01__cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.tg-01__btn {
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 28px;
  border: none;
  transition: opacity .2s, transform .15s;
}
.tg-01__btn:hover { opacity:.85; transform: translateY(-1px); }
.tg-01__btn--primary {
  background: linear-gradient(135deg, var(--g-from), var(--g-via));
  color: #fff;
}
.tg-01__btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.tg-01__stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.tg-01__stat { display: flex; flex-direction: column; gap: 3px; }
.tg-01__stat strong { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.tg-01__stat span { font-size: .8125rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .tg-01__btn { transition: none; }
}

How this works

The gradient text technique combines two CSS declarations on the same element: background: linear-gradient(…) paints a colour ramp behind the element, then -webkit-background-clip: text; background-clip: text restricts the background to only the painted letterforms. Setting -webkit-text-fill-color: transparent makes the text itself invisible, revealing the gradient through it.

The hero layout uses clamp() for fluid type sizing and display: flex with flex-direction: column for the stat strip. Only layout-stable properties are used — no widths or heights animate — keeping the demo at a stable 60 FPS with zero layout repaints.

Customize

  • Adjust the primary gradient by changing --g-from, --g-via, and --g-to on .tg-01 — all gradient text and the CTA button update automatically.
  • Replace the 135deg angle in linear-gradient(135deg, …) with 90deg for a purely horizontal sweep or 180deg for a top-to-bottom fade.
  • Swap the badge colour by editing its color and border-color to match a campaign-specific palette without touching the main gradient variables.
  • Add a second gradient word to the headline by wrapping another span with the tg-01__grad class — the same gradient applies across both spans independently.
  • Increase font weight from 800 to 900 on .tg-01__title for heavier strokes that expose more gradient area, making the colour ramp more visible on small screens.

Watch out for

  • -webkit-background-clip: text must be declared before background-clip: text in some older WebKit versions or the gradient won't render — always include both the prefixed and unprefixed declarations.
  • Setting color: transparent alone is insufficient for hiding the text fill in WebKit-based browsers; you must also set -webkit-text-fill-color: transparent or the fallback solid colour will show through the gradient.
  • Avoid applying background-clip: text to an element that already has a border-image gradient — they share the background property and one will override the other; use separate wrapper elements instead.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Both -webkit-background-clip and the unprefixed form must be declared; older Safari requires the webkit prefix.

More from 20 CSS Text Gradient Effects

Web3 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 CSSMetallic Gold Text Gradient Effect CSSGlassmorphism Text Gradient ContrastPastel Soft Color Text Gradient CSSVertical Linear Gradient Text CSSRadial Gradient Text Effect CSS
View the full collection →

Search CodeFronts

Loading…

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