text gradient color heading hero animated shift gradient text for headings colorful hero title branded gradient text effect animated shifting gradient on headlines solid color headings lack visual punch need gradient text without SVG or images want animated color-shifting headline
Gradient Text
Fetch snippet JSON:
curl https://webspire.de/snippets/text/gradient.json
Gradient type
Editorial headline
Useful for hero headlines and single emphasis lines where the fill itself becomes the visual accent.
Background
Customize
Quick Start
<h1 class="text-gradient text-5xl font-bold">Gradient</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1136 bytes · 48 lines
- Custom Properties
-
--text-gradient-from--text-gradient-to--text-gradient-angle--text-gradient-mid--text-gradient-speed - Classes
-
.text-gradient.text-gradient-animated
text gradient color heading hero animated shift
Two variants: Static (.text-gradient) with configurable two-color gradient, and Animated (.text-gradient-animated) with a three-color gradient that shifts via background-position animation. Both use OKLCH for perceptual uniformity. Animation respects prefers-reduced-motion.
Static gradient
<h1 class="text-gradient text-6xl font-black tracking-tight">
Build the future
</h1>Animated gradient (shifting colors)
<h1 class="text-gradient-animated text-5xl font-bold">
Everything you need
</h1>Custom static colors
<span class="text-gradient text-2xl font-bold"
style="--text-gradient-from: oklch(0.75 0.2 150); --text-gradient-to: oklch(0.65 0.25 200)">
Green to blue
</span>Slow animated variant
<h2 class="text-gradient-animated text-4xl font-bold"
style="--text-gradient-speed: 8s; --text-gradient-from: oklch(0.7 0.2 30); --text-gradient-mid: oklch(0.65 0.22 60); --text-gradient-to: oklch(0.6 0.2 350);">
Warm shifting gradient
</h2>