20 Tailwind CSS Text Gradient
11 / 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

Glassmorphism Card with Gradient Text in Tailwind

A frosted-glass article card floating over drifting colour orbs. Gradient text on glass is a contrast problem — whatever colour blurs through changes the background under every letter — so the headline uses high-lightness stops plus a soft drop-shadow, and the glass falls back to a denser fill via supports-[backdrop-filter:blur(1px)]: where blur isn't available.

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-11 relative isolate w-full min-h-svh grid place-items-center overflow-hidden bg-ttg11-bg px-5 py-16 font-ttg11-sans text-ttg11-ink" aria-labelledby="ttg11-title">
  <span aria-hidden="true" class="absolute top-[-8%] left-[-6%] -z-10 size-[24rem] rounded-full bg-ttg11-orb-a opacity-70 blur-3xl animate-ttg11-drift motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute right-[-6%] bottom-[-10%] -z-10 size-[22rem] rounded-full bg-ttg11-orb-b opacity-60 blur-3xl animate-ttg11-drift [animation-delay:-6s] motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute top-[40%] left-[52%] -z-10 size-[15rem] rounded-full bg-ttg11-orb-c opacity-60 blur-3xl animate-ttg11-drift [animation-delay:-12s] motion-reduce:animate-none"></span>
  <article class="w-full max-w-lg rounded-[28px] border border-white/15 bg-white/16 p-10 shadow-[inset_0_1px_0_rgb(255_255_255/0.2),0_30px_60px_-20px_rgb(0_0_0/0.5)] backdrop-blur-2xl supports-[backdrop-filter:blur(1px)]:bg-white/[0.07] max-sm:p-7">
    <p class="inline-flex rounded-full border border-white/15 bg-white/8 px-3 py-1 text-xs font-semibold tracking-[0.08em] text-ttg11-mut uppercase">Featured article</p>
    <h2 id="ttg11-title" class="mt-5 text-[clamp(2rem,5.5vw,3rem)] leading-[1.06] font-bold tracking-[-0.03em]">Design <span class="bg-linear-110 from-ttg11-a via-ttg11-b to-ttg11-c bg-clip-text text-transparent drop-shadow-[0_1px_10px_var(--color-ttg11-shadow)]">systems</span><br>that scale</h2>
    <p class="mt-4 text-[15.5px]/[1.7] text-ttg11-mut text-pretty">Gradient text on translucent surfaces needs careful colour management. Keep every stop bright enough to hold <strong class="font-semibold text-ttg11-ink">4.5 : 1</strong> against any colour that bleeds through the blur.</p>
    <div class="mt-7 flex items-center gap-3 border-t border-white/12 pt-6">
      <span aria-hidden="true" class="grid size-10 place-items-center rounded-full bg-linear-135 from-ttg11-orb-a to-ttg11-orb-b text-sm font-bold text-white ring-2 ring-white/30">JL</span>
      <div class="text-sm"><p class="font-semibold">Julia Lam</p><p class="text-ttg11-mut"><time datetime="2026-06-12">Jun 12</time> · 5 min read</p></div>
      <a href="#" class="ml-auto inline-flex min-h-11 items-center rounded-full bg-white px-5 text-sm font-semibold text-ttg11-bg transition hover:bg-ttg11-a focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Read</a>
    </div>
  </article>
</section>
@import "tailwindcss";

@theme {
  --color-ttg11-bg: #0a0618;
  --color-ttg11-bg: oklch(0.15 0.045 295);
  --color-ttg11-ink: #fbf7ff;
  --color-ttg11-ink: oklch(0.98 0.01 310);
  --color-ttg11-mut: #e2d6f5;
  --color-ttg11-mut: oklch(0.89 0.04 305);
  --color-ttg11-shadow: #2a0d4d;
  --color-ttg11-shadow: oklch(0.25 0.12 300);
  --color-ttg11-a: #f6b4ff;
  --color-ttg11-a: oklch(0.85 0.13 320);
  --color-ttg11-b: #b7bcff;
  --color-ttg11-b: oklch(0.82 0.1 280);
  --color-ttg11-c: #8fe3ff;
  --color-ttg11-c: oklch(0.87 0.1 220);
  --color-ttg11-orb-a: #9b4dff;
  --color-ttg11-orb-a: oklch(0.6 0.25 300);
  --color-ttg11-orb-b: #ff4fa3;
  --color-ttg11-orb-b: oklch(0.67 0.23 355);
  --color-ttg11-orb-c: #18c6e0;
  --color-ttg11-orb-c: oklch(0.76 0.13 210);
  --font-ttg11-sans: 'Outfit', system-ui, sans-serif;
  --animate-ttg11-drift: ttg11-drift 18s ease-in-out infinite;

  @keyframes ttg11-drift {
    0%,
        100% {
      transform: translate(0, 0) scale(1);
    }

    33% {
      transform: translate(6%, 8%) scale(1.08);
    }

    66% {
      transform: translate(-6%, 3%) scale(0.94);
    }
  }
}

.ttg-11 {
  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-ttg11-bg: #0a0618;
  --color-ttg11-bg: oklch(0.15 0.045 295);
  --color-ttg11-ink: #fbf7ff;
  --color-ttg11-ink: oklch(0.98 0.01 310);
  --color-ttg11-mut: #e2d6f5;
  --color-ttg11-mut: oklch(0.89 0.04 305);
  --color-ttg11-shadow: #2a0d4d;
  --color-ttg11-shadow: oklch(0.25 0.12 300);
  --color-ttg11-a: #f6b4ff;
  --color-ttg11-a: oklch(0.85 0.13 320);
  --color-ttg11-b: #b7bcff;
  --color-ttg11-b: oklch(0.82 0.1 280);
  --color-ttg11-c: #8fe3ff;
  --color-ttg11-c: oklch(0.87 0.1 220);
  --color-ttg11-orb-a: #9b4dff;
  --color-ttg11-orb-a: oklch(0.6 0.25 300);
  --color-ttg11-orb-b: #ff4fa3;
  --color-ttg11-orb-b: oklch(0.67 0.23 355);
  --color-ttg11-orb-c: #18c6e0;
  --color-ttg11-orb-c: oklch(0.76 0.13 210);
  --font-ttg11-sans: 'Outfit', system-ui, sans-serif;
  --animate-ttg11-drift: ttg11-drift 18s ease-in-out infinite;

  @keyframes ttg11-drift {
    0%,
        100% {
      transform: translate(0, 0) scale(1);
    }

    33% {
      transform: translate(6%, 8%) scale(1.08);
    }

    66% {
      transform: translate(-6%, 3%) scale(0.94);
    }
  }
}

.ttg-11 {
  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=Outfit:wght@400..800&display=swap">

What changed in the port

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

  • backdrop-filter plus its -webkit- twin became backdrop-blur-2xl; the missing Firefox fallback the original only described is now a real supports-[…]: variant.
  • UI upgrade: the orbs drift slowly so the glass visibly refracts, the card gained a lit inset top edge, and the author row now ends in a Read action.
  • Contrast fix: muted copy was rgba(…,.55) over shifting colour (as low as 3:1); it is now a solid 0.89-lightness tint, and the headline stops were lifted above L 0.8.
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: Glassmorphism Card with Gradient Text in Tailwind
Source: https://codefronts.com/motion/tailwind-css-text-gradient/glassmorphism-card-with-gradient-text-in-tailwind/

A frosted-glass article card floating over drifting colour orbs. Gradient text on glass is a contrast problem &mdash; whatever colour blurs through changes the background under every letter &mdash; so the headline uses high-lightness stops plus a soft drop-shadow, and the glass falls back to a denser fill via supports-[backdrop-filter:blur(1px)]: where blur isn't available.
## HTML
```html
<section class="ttg-11 relative isolate w-full min-h-svh grid place-items-center overflow-hidden bg-ttg11-bg px-5 py-16 font-ttg11-sans text-ttg11-ink" aria-labelledby="ttg11-title">
  <span aria-hidden="true" class="absolute top-[-8%] left-[-6%] -z-10 size-[24rem] rounded-full bg-ttg11-orb-a opacity-70 blur-3xl animate-ttg11-drift motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute right-[-6%] bottom-[-10%] -z-10 size-[22rem] rounded-full bg-ttg11-orb-b opacity-60 blur-3xl animate-ttg11-drift [animation-delay:-6s] motion-reduce:animate-none"></span>
  <span aria-hidden="true" class="absolute top-[40%] left-[52%] -z-10 size-[15rem] rounded-full bg-ttg11-orb-c opacity-60 blur-3xl animate-ttg11-drift [animation-delay:-12s] motion-reduce:animate-none"></span>
  <article class="w-full max-w-lg rounded-[28px] border border-white/15 bg-white/16 p-10 shadow-[inset_0_1px_0_rgb(255_255_255/0.2),0_30px_60px_-20px_rgb(0_0_0/0.5)] backdrop-blur-2xl supports-[backdrop-filter:blur(1px)]:bg-white/[0.07] max-sm:p-7">
    <p class="inline-flex rounded-full border border-white/15 bg-white/8 px-3 py-1 text-xs font-semibold tracking-[0.08em] text-ttg11-mut uppercase">Featured article</p>
    <h2 id="ttg11-title" class="mt-5 text-[clamp(2rem,5.5vw,3rem)] leading-[1.06] font-bold tracking-[-0.03em]">Design <span class="bg-linear-110 from-ttg11-a via-ttg11-b to-ttg11-c bg-clip-text text-transparent drop-shadow-[0_1px_10px_var(--color-ttg11-shadow)]">systems</span><br>that scale</h2>
    <p class="mt-4 text-[15.5px]/[1.7] text-ttg11-mut text-pretty">Gradient text on translucent surfaces needs careful colour management. Keep every stop bright enough to hold <strong class="font-semibold text-ttg11-ink">4.5 : 1</strong> against any colour that bleeds through the blur.</p>
    <div class="mt-7 flex items-center gap-3 border-t border-white/12 pt-6">
      <span aria-hidden="true" class="grid size-10 place-items-center rounded-full bg-linear-135 from-ttg11-orb-a to-ttg11-orb-b text-sm font-bold text-white ring-2 ring-white/30">JL</span>
      <div class="text-sm"><p class="font-semibold">Julia Lam</p><p class="text-ttg11-mut"><time datetime="2026-06-12">Jun 12</time> · 5 min read</p></div>
      <a href="#" class="ml-auto inline-flex min-h-11 items-center rounded-full bg-white px-5 text-sm font-semibold text-ttg11-bg transition hover:bg-ttg11-a focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Read</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-ttg11-bg: #0a0618;
  --color-ttg11-bg: oklch(0.15 0.045 295);
  --color-ttg11-ink: #fbf7ff;
  --color-ttg11-ink: oklch(0.98 0.01 310);
  --color-ttg11-mut: #e2d6f5;
  --color-ttg11-mut: oklch(0.89 0.04 305);
  --color-ttg11-shadow: #2a0d4d;
  --color-ttg11-shadow: oklch(0.25 0.12 300);
  --color-ttg11-a: #f6b4ff;
  --color-ttg11-a: oklch(0.85 0.13 320);
  --color-ttg11-b: #b7bcff;
  --color-ttg11-b: oklch(0.82 0.1 280);
  --color-ttg11-c: #8fe3ff;
  --color-ttg11-c: oklch(0.87 0.1 220);
  --color-ttg11-orb-a: #9b4dff;
  --color-ttg11-orb-a: oklch(0.6 0.25 300);
  --color-ttg11-orb-b: #ff4fa3;
  --color-ttg11-orb-b: oklch(0.67 0.23 355);
  --color-ttg11-orb-c: #18c6e0;
  --color-ttg11-orb-c: oklch(0.76 0.13 210);
  --font-ttg11-sans: 'Outfit', system-ui, sans-serif;
  --animate-ttg11-drift: ttg11-drift 18s ease-in-out infinite;

  @keyframes ttg11-drift {
    0%,
        100% {
      transform: translate(0, 0) scale(1);
    }

    33% {
      transform: translate(6%, 8%) scale(1.08);
    }

    66% {
      transform: translate(-6%, 3%) scale(0.94);
    }
  }
}

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

How this works

Fallback first, glass second. Without blur, a 7% white fill is unreadable over bright orbs. The base class is a denser 16% fill; only engines that support backdrop-filter thin it out:

<article class="bg-white/16 backdrop-blur-2xl
  supports-[backdrop-filter:blur(1px)]:bg-white/[0.07]">

Contrast on glass. The headline stops are all above L 0.78 so they stay bright against any orb colour, and a 10px drop-shadow in a deep violet lays a darker halo directly under the glyphs — the trick that keeps gradient text legible over unpredictable backgrounds.

Living background. The orbs drift with transform-only keyframes on different delays, so the glass visibly refracts motion without any repaint of the card.

Make it yours

  • More frost: backdrop-blur-3xl and bg-white/[0.1].
  • Static orbs: remove the animate-ttg11-drift classes.
  • Different scene: retint --color-ttg11-orb-a/b/c; keep the headline stops light.
  • Light glass: swap to bg-black/5 on a pale stage with dark gradient stops.

Gotchas — read before shipping

  • Always pair glass with a non-blur fallback fill — older Firefox ESR builds and some WebViews render backdrop-filter as nothing.
  • Big blurred orbs are expensive; three is plenty, and motion-reduce: should stop them.
  • Run contrast checks on the darkest frame behind the text, not the average colour.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is supported in Firefox 103+; the supports- fallback covers WebViews that lack it.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗background-clip: texttw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →