Generator für Text mit Verlauf (CSS)
Schreibe den Text, wähle zwei oder drei Farben und den Winkel. Die Vorschau zeigt das Ergebnis auf hellem und dunklem Hintergrund.
So geht’sTitel mit Farbverlauf
Verfügbar auf: 
Generator für Text mit Verlauf (CSS): wofür es gut ist
Ein Titel mit Buchstaben im Verlauf fällt auf der Startseite und auf Landingpages auf und wird nur mit CSS gemacht: Der Verlauf wird zum Hintergrund des Textes, und background-clip: text schneidet diesen Hintergrund in die Form der Buchstaben.
Der Generator baut den Code mit dem Präfix -webkit-, einer Ersatzfarbe für Browser ohne Unterstützung, der Anpassung für den Hochkontrastmodus von Windows und, wenn du möchtest, der Animation des Verlaufs, die für alle anhält, die weniger Bewegung bevorzugen. Die Vorschau zeigt den Titel auf hellem und dunklem Hintergrund.
So geht’s
- Schreibe den Text und wähle Schrift und Größe.
- Wähle Farben und Winkel.
- Kopiere das CSS und wende die Klasse auf den Titel an.
Wann nutzen
- Titel der Startseite.
- Hervorhebung von Preis oder Aufruf.
- Logo als Text.
Häufige Fragen
Wie wird Text mit Verlauf gemacht?
Der Verlauf ist der Hintergrund des Elements, und die Eigenschaft background-clip: text schneidet diesen Hintergrund in die Form der Buchstaben; die Textfarbe wird transparent, damit der Hintergrund erscheint. Es funktioniert mit jeder Schrift, und der Text bleibt markierbar und für Screenreader lesbar.
Braucht es das Präfix -webkit-?
Der Code enthält -webkit-background-clip neben der Version ohne Präfix, weil etwas ältere Browser nur mit Präfix akzeptieren. Die Ersatzfarbe erscheint dort, wo nichts davon funktioniert.
Kann man es bei Absätzen nutzen?
Es funktioniert, aber besser ist es, es für Titel und kurze Hervorhebungen aufzuheben. In Fließtext ermüdet der Verlauf das Lesen, und die helleren Teile können den Kontrast zum Hintergrund verlieren.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.