20 CSS Text Gradient Effects 18 / 20

Tailwind CSS Text Gradient Utility Classes

A mapping table and live recreation of Tailwind's bg-clip-text, bg-gradient-to-*, from-*, and text-transparent utility patterns using native CSS.

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

The code

<div class="tg-18">
  <div class="tg-18__doc">
    <h2 class="tg-18__heading">Tailwind CSS Text Gradient<br><span class="tg-18__grad">Utility Classes</span></h2>
    <p class="tg-18__sub">Tailwind achieves gradient text by composing three utility classes. Here's how the framework classes map to raw CSS properties.</p>

    <div class="tg-18__table-wrap">
      <table class="tg-18__table">
        <thead><tr><th>Tailwind Class</th><th>CSS Property</th></tr></thead>
        <tbody>
          <tr><td><code>bg-gradient-to-r</code></td><td><code>background-image: linear-gradient(to right, …)</code></td></tr>
          <tr><td><code>from-indigo-500</code></td><td><code>--tw-gradient-from: #6366f1</code></td></tr>
          <tr><td><code>to-purple-600</code></td><td><code>--tw-gradient-to: #9333ea</code></td></tr>
          <tr><td><code>bg-clip-text</code></td><td><code>-webkit-background-clip: text; background-clip: text</code></td></tr>
          <tr><td><code>text-transparent</code></td><td><code>color: transparent; -webkit-text-fill-color: transparent</code></td></tr>
        </tbody>
      </table>
    </div>

    <div class="tg-18__preview">
      <p class="tg-18__prev-lbl">Result — native CSS recreation of the Tailwind output:</p>
      <h3 class="tg-18__demo-a">bg-gradient-to-r from-cyan-400 to-blue-600</h3>
      <h3 class="tg-18__demo-b">bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500</h3>
      <h3 class="tg-18__demo-c">bg-gradient-to-r from-emerald-400 to-teal-600</h3>
    </div>
  </div>
</div>
.tg-18, .tg-18 *, .tg-18 *::before, .tg-18 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-18 ::selection { background:#6366f1; color:#fff; }

.tg-18 {
  --g-a: #6366f1;
  --g-b: #9333ea;
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --head-bg: #f1f5f9;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  display: flex;
  justify-content: center;
}

.tg-18__doc { max-width: 660px; width: 100%; }

.tg-18__heading {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.tg-18__grad {
  background: linear-gradient(90deg, var(--g-a), var(--g-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tg-18__sub {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 520px;
}

.tg-18__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 24px;
}
.tg-18__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .825rem;
}
.tg-18__table thead { background: var(--head-bg); }
.tg-18__table th {
  text-align: left;
  padding: 10px 16px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tg-18__table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tg-18__table tr:last-child td { border-bottom: none; }
.tg-18__table code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .775em;
  color: var(--g-a);
  white-space: nowrap;
}

.tg-18__preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.tg-18__prev-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .09em; color: var(--muted); margin-bottom: 12px; }

/* Native CSS recreating Tailwind gradient-text utilities */
.tg-18__demo-a {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to right, #22d3ee, #2563eb);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 4px;
}
.tg-18__demo-b {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to bottom right, #fb7185, #d946ef, #6366f1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 4px;
}
.tg-18__demo-c {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to right, #34d399, #0d9488);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

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

How this works

Tailwind's gradient text pattern composes three layers of utility classes. bg-gradient-to-r sets background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)). The from-* and to-* classes populate the CSS custom property stops. bg-clip-text applies -webkit-background-clip: text; background-clip: text via a utility, and text-transparent sets both color and -webkit-text-fill-color to transparent.

Recreating this in native CSS requires fewer lines: set background to the desired gradient, apply -webkit-background-clip: text; background-clip: text, and set -webkit-text-fill-color: transparent. The Tailwind utility pattern is more verbose because it separates gradient construction into composable token slots, but the compiled output is functionally identical to hand-written CSS.

Customize

  • Use arbitrary Tailwind values like from-[#f59e0b] and to-[#ef4444] to replicate custom brand colours that fall outside the default Tailwind palette.
  • Add via-* class (e.g. via-purple-500) between from-* and to-* to introduce a mid-stop, equivalent to adding a second colour in the native CSS gradient function.
  • Combine bg-gradient-to-br with dark mode utilities like dark:from-indigo-300 dark:to-purple-400 to automatically swap to lighter gradient shades in dark mode.
  • In native CSS, replicate the via stop by inserting a second percentage: linear-gradient(to right, #6366f1 0%, #a855f7 50%, #ec4899 100%) — exact equivalent to Tailwind's three-class composition.
  • Use bg-[length:200%_100%] animate-[shift_3s_linear_infinite] with a custom keyframe in tailwind.config.js to replicate the moving gradient animation entirely in utility classes.

Watch out for

  • In Tailwind v4, gradient utility class names and the custom property token names changed from v3. The --tw-gradient-from and --tw-gradient-to variables may have different names or structures — always check the version-specific documentation before porting.
  • Tailwind's text-transparent sets both color: transparent and -webkit-text-fill-color: transparent via the [color:transparent] selector pattern. If you override this with a !important anywhere in your CSS, the fill will no longer be transparent and the gradient won't show.
  • The Tailwind bg-clip-text utility does not include the prefixed -webkit-background-clip: text in all versions. Inspect the generated CSS in your project's output to confirm the webkit prefix is present, or add it manually in your @layer utilities.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

This demo uses only native CSS and maps Tailwind v3 utility behaviour; verify against the Tailwind version in your project as class names and generated CSS changed in v4.

More from 20 CSS Text Gradient Effects

Gradient 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 OutlineCSS Text Gradient Fallback for Older BrowsersCSS Text Gradient on Multiline Paragraph
View the full collection →

Search CodeFronts

Loading…

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