Wie funktioniert Farbverlaufstext in CSS?

CSS hat keine Eigenschaft für „Text mit Farbverlauf“. Der übliche Trick besteht darin, einen Farbverlauf als Hintergrund des Elements zu verwenden, diesen Hintergrund mit background-clip: text auf die Form der Buchstaben zu beschränken und die Textfüllung transparent zu machen, sodass der Farbverlauf durchscheint.

Werkzeugbeschreibung

Gib deinen Text ein, wähle eine Start- und Endfarbe und stelle den Winkel ein. Das Werkzeug zeigt eine Live-Vorschau an und liefert dir den CSS-Code zum Kopieren. Du kannst auch Schriftfamilie, Schriftstärke und Schriftgröße ändern, damit die Vorschau dem entspricht, was du auf deiner Seite verwenden möchtest.

Die generierte Regel sieht so aus:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

Die tatsächliche Ausgabe enthält außerdem die Schrifteinstellungen und Umbruchregeln.

Funktionen

  • Linearer Farbverlauf mit zwei Farben und einem Winkel von 0 bis 360 Grad
  • Einstellungen für Schriftfamilie, Schriftstärke und Schriftgröße
  • Live-Vorschau, die du als Bild exportieren kannst, sowie direkt kopierbarer CSS-Code