CSS-Text-Gradient-Generator
Farbverlauf auf Text legen: Farbstopps, Winkel und optionale Animation einstellen, live testen und CSS oder Tailwind kopieren.
Der CSS-Text-Gradient-Generator legt einen Farbverlauf direkt auf Schrift. Du wählst Farbstopps, Verlaufstyp und Winkel, testest das Ergebnis mit eigenem Text und kannst den Verlauf optional animieren. Fertig sind CSS mit background-clip: text, einem einfarbigen Fallback und Reduced-Motion-Regel sowie passende Tailwind-Klassen.
Mach’s klar.
Farbstopps
.text-gradient {
display: inline-block;
color: #3b82f6;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.text-gradient {
background-image: linear-gradient(90deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}Text mit Farbverlauf in CSS
CSS hat keine Eigenschaft für Verlaufsfarben auf Schrift. Der Effekt entsteht aus drei
Bausteinen: ein Verlauf als background-image, background-clip: text,
das den Hintergrund auf die Buchstaben zuschneidet, und eine transparente Textfarbe.
| Eigenschaft | Aufgabe | Tailwind |
|---|---|---|
background-image | Der eigentliche Verlauf | bg-linear-to-r, bg-[…] |
background-clip: text | Verlauf nur in den Buchstaben | bg-clip-text |
color: transparent | Macht den Verlauf sichtbar | text-transparent |
display: inline-block | Verlauf nur so breit wie der Text | inline-block |
So gehst du vor
- Text eingeben und Schrift einstellen, damit die Vorschau deiner Überschrift entspricht.
- Vorlage wählen oder Farbstopps ziehen, Typ und Winkel festlegen.
- Code kopieren. Verläufe für Flächen und Hintergründe baust du im Gradient-Generator, passende Farben findest du im Farbpaletten-Generator.
Beispiel
Für eine Hero-Überschrift reicht background-image: linear-gradient(90deg, #06b6d4, #8b5cf6) zusammen mit background-clip: text und color: transparent. Prüfe den
Kontrast der hellsten Verlaufsfarbe zum Hintergrund mit dem Farbkontrast-Prüfer.
Häufige Fragen
Wie funktioniert ein Farbverlauf auf Text in CSS?
Der Verlauf wird als background-image gesetzt und mit background-clip: text auf die Form der Buchstaben zugeschnitten. Damit er sichtbar wird, muss die Textfarbe transparent sein. Für Safari und ältere Chromium-Versionen gehört zusätzlich -webkit-background-clip: text dazu.
Warum reicht der Verlauf über die ganze Zeile statt nur über den Text?
Eine Überschrift ist ein Block-Element und so breit wie ihr Container, der Verlauf füllt diese ganze Breite. Mit display: inline-block (Tailwind: inline-block) ist das Element nur so breit wie der Text, und der Verlauf nutzt seine volle Farbspanne.
Wozu dient die Fallback-Farbe?
Unterstützt ein Browser background-clip: text nicht, wäre transparenter Text unsichtbar. Der Generator setzt deshalb zuerst eine normale Farbe und schaltet den Verlauf nur innerhalb von @supports ein. Heute unterstützen alle gängigen Browser den Effekt, der Fallback ist eine Absicherung.
Ist Text mit Farbverlauf barrierefrei?
Der Text bleibt echter, markierbarer und vorlesbarer Text. Achte auf ausreichenden Kontrast an der hellsten und dunkelsten Stelle des Verlaufs und setze den Effekt nur für große Schrift wie Überschriften ein. Animationen stoppt der Code automatisch, wenn im System „Bewegung reduzieren“ aktiv ist.
Wie wird die Animation nahtlos?
Der Generator spiegelt die Farbstopps und verdoppelt die Hintergrundbreite (background-size: 200% auto). Die Animation verschiebt den Hintergrund um genau eine Kachelbreite, sodass Anfang und Ende dieselbe Farbe zeigen und kein Sprung entsteht.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.