gradient text color typography heading effect Marketing-Headlines und Hero-Titel Sektionsüberschriften mit visueller Akzentuierung Brand-Highlights in Landingpages Einfarbige Überschriften wirken flach und uninteressant Gradient-Text ohne JS oder SVG-Umwege
Gradient Text
Fetch snippet JSON:
curl https://webspire.de/snippets/text/gradient-text.json Preview
Background
Customize
Quick Start
<h1 class="gradient-text text-5xl font-bold">Build faster</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 788 bytes · 35 lines
- Custom Properties
-
--gradient-from--gradient-via--gradient-to - Classes
-
.gradient-text.gradient-text-subtle
gradient text color typography heading effect
.gradient-text für bunte OKLCH-Gradienten (konfigurierbarer via Custom Properties), .gradient-text-subtle für elegante Dunkel-zu-Grau-Gradienten. Beide via background-clip: text — kein JS nötig.