Text Gradient Generator
Erstelle beeindruckende CSS-Farbverlauf-Texteffekte mit background-clip. Live-Vorschau, CSS oder SVG sofort kopieren.
① Text eingeben ② Farben, Winkel und Stil anpassen ③ CSS-Verlauf kopieren
Text
Größe
Gewicht
Schriftart
Ausrichtung
Typ
Farbstopps
0%
100%
Voreinstellungen
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
Was ist CSS-Verlaufstext?
CSS-Verlaufstext verwendet die background-clip: text-Technik, um einen Verlauf als Textfüllfarbe anzuwenden. Durch Setzen von -webkit-text-fill-color: transparent und background-clip: text wird das Verlaufsbild durch die Textform sichtbar. Funktioniert mit linear-gradient, radial-gradient und conic-gradient.
FAQ
background-clip: text beschneidet den Hintergrund des Elements auf die Form seines Textes. Kombiniert mit -webkit-text-fill-color: transparent wird der als Hintergrund verwendete Verlauf nur durch die Textzeichen sichtbar.
-webkit-text-fill-color überschreibt color für die Textfüllung in WebKit/Blink-Engines. Die alleinige Verwendung von color: transparent versteckt die Textfüllung in allen Browsern möglicherweise nicht vollständig.
Lineare Verläufe transitieren Farben entlang einer geraden Linie in einem gewählten Winkel. Radiale Verläufe strahlen vom Mittelpunkt nach außen. Konische Verläufe schwenken Farben um einen Mittelpunkt wie ein Farbrad.
Die Unterstützung ist ausgezeichnet. Chrome, Edge, Opera und Firefox unterstützen background-clip: text ohne Präfix. Safari benötigt das Präfix -webkit-background-clip: text. Dieses Tool gibt beide Eigenschaften für volle Kompatibilität aus.
Setze background-size auf 200% 200% und animiere background-position in einer @keyframes-Regel. Zum Beispiel: @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }.
Verlaufstext eignet sich am besten für Hero-Überschriften, Abschnittstitel, Markennamen und dekorative Elemente. Vermeide es für Fließtext oder kleine Größen, wo Verläufe die Lesbarkeit verringern.
Überprüfe den Kontrast für den hellsten Farbstopp gegenüber dem Hintergrund. Verlasse dich nicht nur auf Farbe, um Bedeutung zu vermitteln. Teste bei kleineren Schriftgrößen die Lesbarkeit.