20 CSS Text Gradient Effects01 / 20

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Text Gradient Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Text Gradient Landing Page Hero Title
Source: https://codefronts.com/motion/css-text-gradient-effect/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

  • 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.

Gotchas — read before shipping

  • -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.

Techniques used in this demo

background-clip: textMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →