20 Tailwind CSS Text Gradient
04 / 20

All 20 in 20 Tailwind CSS Text Gradient

  1. 01Tailwind CSS Gradient Text Hero Heading
  2. 02Tailwind Glowing Gradient Text (Web3 Neon Glow)
  3. 03Tailwind Gradient Text Logo for Navbar
  4. 04Bold Minimalist Gradient Heading in Tailwind CSS
  5. 05Tailwind Gradient Text on Hover Animation
  6. 06Tailwind Gradient Text Button & Gradient Border Button
  7. 07Tailwind Active Nav Link with Gradient Text
  8. 08Tailwind Animated Gradient Text (Moving Gradient)
  9. 09Cyberpunk Neon Gradient Text in Tailwind CSS
  10. 10Tailwind Metallic Gold Gradient Text Effect
  11. 11Glassmorphism Card with Gradient Text in Tailwind
  12. 12Pastel Gradient Text in Tailwind CSS
  13. 13Tailwind Vertical Gradient Text (Top to Bottom)
  14. 14Tailwind Radial Gradient Text Effect
  15. 15Tailwind Rainbow Gradient Text (Multi-Color)
  16. 16Tailwind Gradient Text with Outline Stroke
  17. 17Tailwind Gradient Text Fallback with @supports
  18. 18Tailwind bg-clip-text Gradient Utility Classes Cheat Sheet
  19. 19Tailwind Gradient Text on Multiline Paragraph
  20. 20Tailwind Dark Mode Gradient Text Toggle
Pure TailwindMIT licensed

Bold Minimalist Gradient Heading in Tailwind CSS

An editorial type specimen: three font-black words, each with its own dual-tone gradient, on a white page. w-fit is the quiet hero — it shrinks each block heading to its glyphs so the gradient spans the word, not the viewport.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="ttg-04 w-full min-h-svh grid place-items-center bg-ttg04-bg px-8 py-16 font-ttg04-sans text-ttg04-ink" aria-label="Bold minimalist gradient heading demo">
  <div class="w-full max-w-3xl">
    <p class="flex items-center gap-3 font-ttg04-mono text-xs tracking-[0.14em] text-ttg04-mut uppercase"><span aria-hidden="true" class="h-px w-8 bg-ttg04-ink"></span>Type scale specimen</p>
    <div class="mt-8 grid gap-1">
      <div class="flex items-start gap-5"><span aria-hidden="true" class="mt-[1.4em] font-ttg04-mono text-[11px] text-ttg04-mut">01</span><h2 class="w-fit bg-linear-to-r from-ttg04-a1 to-ttg04-b1 bg-clip-text pb-[0.08em] text-[clamp(4rem,15vw,8rem)] leading-[0.9] font-black tracking-[-0.05em] text-transparent">Clarity</h2></div>
      <div class="flex items-start gap-5"><span aria-hidden="true" class="mt-[1.1em] font-ttg04-mono text-[11px] text-ttg04-mut">02</span><h2 class="w-fit bg-linear-to-r from-ttg04-a2 to-ttg04-b2 bg-clip-text pb-[0.08em] text-[clamp(3rem,11vw,5.75rem)] leading-[0.9] font-black tracking-[-0.045em] text-transparent">Purpose</h2></div>
      <div class="flex items-start gap-5"><span aria-hidden="true" class="mt-[0.9em] font-ttg04-mono text-[11px] text-ttg04-mut">03</span><h2 class="w-fit bg-linear-to-r from-ttg04-a3 to-ttg04-b3 bg-clip-text pb-[0.08em] text-[clamp(2.1rem,7.5vw,4rem)] leading-[0.9] font-black tracking-[-0.04em] text-transparent">Impact</h2></div>
    </div>
    <div class="mt-10 grid gap-6 border-t border-ttg04-line pt-7 sm:grid-cols-[1fr_auto]">
      <p class="max-w-md text-[15px]/[1.7] text-ttg04-mut text-pretty">Dual-tone gradients on heavy weights create editorial impact without imagery. Each ramp travels left to right across exactly one word.</p>
      <p aria-hidden="true" class="self-end font-ttg04-mono text-[11.5px] text-ttg04-mut">w-fit · font-black · bg-clip-text</p>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-ttg04-bg: #ffffff;
  --color-ttg04-bg: oklch(1 0 0);
  --color-ttg04-ink: #12131a;
  --color-ttg04-ink: oklch(0.19 0.01 275);
  --color-ttg04-mut: #5c6273;
  --color-ttg04-mut: oklch(0.49 0.025 265);
  --color-ttg04-line: #e6e7ec;
  --color-ttg04-line: oklch(0.93 0.006 270);
  --color-ttg04-a1: #1e1b4b;
  --color-ttg04-a1: oklch(0.26 0.1 280);
  --color-ttg04-b1: #6366f1;
  --color-ttg04-b1: oklch(0.59 0.2 277);
  --color-ttg04-a2: #312e81;
  --color-ttg04-a2: oklch(0.36 0.14 279);
  --color-ttg04-b2: #c026d3;
  --color-ttg04-b2: oklch(0.59 0.25 322);
  --color-ttg04-a3: #0f172a;
  --color-ttg04-a3: oklch(0.21 0.04 265);
  --color-ttg04-b3: #0ea5e9;
  --color-ttg04-b3: oklch(0.68 0.15 237);
  --font-ttg04-sans: 'Archivo', system-ui, sans-serif;
  --font-ttg04-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.ttg-04 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-ttg04-bg: #ffffff;
  --color-ttg04-bg: oklch(1 0 0);
  --color-ttg04-ink: #12131a;
  --color-ttg04-ink: oklch(0.19 0.01 275);
  --color-ttg04-mut: #5c6273;
  --color-ttg04-mut: oklch(0.49 0.025 265);
  --color-ttg04-line: #e6e7ec;
  --color-ttg04-line: oklch(0.93 0.006 270);
  --color-ttg04-a1: #1e1b4b;
  --color-ttg04-a1: oklch(0.26 0.1 280);
  --color-ttg04-b1: #6366f1;
  --color-ttg04-b1: oklch(0.59 0.2 277);
  --color-ttg04-a2: #312e81;
  --color-ttg04-a2: oklch(0.36 0.14 279);
  --color-ttg04-b2: #c026d3;
  --color-ttg04-b2: oklch(0.59 0.25 322);
  --color-ttg04-a3: #0f172a;
  --color-ttg04-a3: oklch(0.21 0.04 265);
  --color-ttg04-b3: #0ea5e9;
  --color-ttg04-b3: oklch(0.68 0.15 237);
  --font-ttg04-sans: 'Archivo', system-ui, sans-serif;
  --font-ttg04-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.ttg-04 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;900&family=JetBrains+Mono:wght@500&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The original needed display:inline-block overrides and a sibling rule to stack; w-fit on block headings does both jobs in one class.
  • Each word's gradient is a visible class list — no --g-a2 lookup in a stylesheet to see what 'Purpose' looks like.
  • UI upgrade: Archivo Black-weight display face, mono index numbers, a hairline kicker and a two-column footer turn a demo into a specimen sheet.
  • Bug fix: descenders in 'Purpose' were cropped at tight leading; pb-[0.08em] restores them.
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 demo 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: Bold Minimalist Gradient Heading in Tailwind CSS
Source: https://codefronts.com/motion/tailwind-css-text-gradient/bold-minimalist-gradient-heading-in-tailwind-css/

An editorial type specimen: three font-black words, each with its own dual-tone gradient, on a white page. w-fit is the quiet hero &mdash; it shrinks each block heading to its glyphs so the gradient spans the word, not the viewport.
## HTML
```html
<section class="ttg-04 w-full min-h-svh grid place-items-center bg-ttg04-bg px-8 py-16 font-ttg04-sans text-ttg04-ink" aria-label="Bold minimalist gradient heading demo">
  <div class="w-full max-w-3xl">
    <p class="flex items-center gap-3 font-ttg04-mono text-xs tracking-[0.14em] text-ttg04-mut uppercase"><span aria-hidden="true" class="h-px w-8 bg-ttg04-ink"></span>Type scale specimen</p>
    <div class="mt-8 grid gap-1">
      <div class="flex items-start gap-5"><span aria-hidden="true" class="mt-[1.4em] font-ttg04-mono text-[11px] text-ttg04-mut">01</span><h2 class="w-fit bg-linear-to-r from-ttg04-a1 to-ttg04-b1 bg-clip-text pb-[0.08em] text-[clamp(4rem,15vw,8rem)] leading-[0.9] font-black tracking-[-0.05em] text-transparent">Clarity</h2></div>
      <div class="flex items-start gap-5"><span aria-hidden="true" class="mt-[1.1em] font-ttg04-mono text-[11px] text-ttg04-mut">02</span><h2 class="w-fit bg-linear-to-r from-ttg04-a2 to-ttg04-b2 bg-clip-text pb-[0.08em] text-[clamp(3rem,11vw,5.75rem)] leading-[0.9] font-black tracking-[-0.045em] text-transparent">Purpose</h2></div>
      <div class="flex items-start gap-5"><span aria-hidden="true" class="mt-[0.9em] font-ttg04-mono text-[11px] text-ttg04-mut">03</span><h2 class="w-fit bg-linear-to-r from-ttg04-a3 to-ttg04-b3 bg-clip-text pb-[0.08em] text-[clamp(2.1rem,7.5vw,4rem)] leading-[0.9] font-black tracking-[-0.04em] text-transparent">Impact</h2></div>
    </div>
    <div class="mt-10 grid gap-6 border-t border-ttg04-line pt-7 sm:grid-cols-[1fr_auto]">
      <p class="max-w-md text-[15px]/[1.7] text-ttg04-mut text-pretty">Dual-tone gradients on heavy weights create editorial impact without imagery. Each ramp travels left to right across exactly one word.</p>
      <p aria-hidden="true" class="self-end font-ttg04-mono text-[11.5px] text-ttg04-mut">w-fit · font-black · bg-clip-text</p>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg04-bg: #ffffff;
  --color-ttg04-bg: oklch(1 0 0);
  --color-ttg04-ink: #12131a;
  --color-ttg04-ink: oklch(0.19 0.01 275);
  --color-ttg04-mut: #5c6273;
  --color-ttg04-mut: oklch(0.49 0.025 265);
  --color-ttg04-line: #e6e7ec;
  --color-ttg04-line: oklch(0.93 0.006 270);
  --color-ttg04-a1: #1e1b4b;
  --color-ttg04-a1: oklch(0.26 0.1 280);
  --color-ttg04-b1: #6366f1;
  --color-ttg04-b1: oklch(0.59 0.2 277);
  --color-ttg04-a2: #312e81;
  --color-ttg04-a2: oklch(0.36 0.14 279);
  --color-ttg04-b2: #c026d3;
  --color-ttg04-b2: oklch(0.59 0.25 322);
  --color-ttg04-a3: #0f172a;
  --color-ttg04-a3: oklch(0.21 0.04 265);
  --color-ttg04-b3: #0ea5e9;
  --color-ttg04-b3: oklch(0.68 0.15 237);
  --font-ttg04-sans: 'Archivo', system-ui, sans-serif;
  --font-ttg04-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.ttg-04 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The width problem. A block <h1> is as wide as its container; a gradient on it spans that full width, so a short word only ever shows the first third of the ramp. w-fit sets width: fit-content and the gradient box matches the word:

<h2 class="w-fit bg-linear-to-r from-ttg04-a1 to-ttg04-b1
  bg-clip-text pb-[0.08em] text-transparent">Clarity</h2>

Weight is surface area. At font-black (900) each glyph exposes far more gradient than at 400, which is why the colour shift reads even at 4rem on a phone.

Descender room. background-clip:text paints only inside the element's box; tight leading-[0.9] can crop the 'y' in Purpose. pb-[0.08em] extends the box without moving the baseline rhythm much.

Make it yours

  • Diagonal slice: use bg-linear-45 on one word to contrast with the horizontal ramps.
  • Serif specimen: swap the font token to a heavy serif — wide strokes expose more gradient.
  • Tighter stack: drop the index labels and set gap-0.
  • Hover shimmer: add bg-[length:200%_100%] hover:bg-right transition-[background-position] duration-700.

Gotchas — read before shipping

  • Without w-fit (or inline-block) the gradient stretches across the full row — the most common 'my gradient looks flat' bug.
  • leading below 1 with bg-clip-text crops descenders; add bottom padding rather than raising line-height.
  • Pure 900 weights must be loaded — a synthesized bold smears the clipped edges.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

width: fit-content is unprefixed in all evergreen engines.

Techniques used in this demo

Utilitiesfirst-class utility or variant

background-clip: texttw ↗

Arbitraryneeds bracket syntax

clamp()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →