CSS Verlaufstext-Generator - Bunte Texteffekte

Schöne CSS-Verlaufstext-Effekte mit einer visuellen Live-Vorschau generieren

CSS-Werkzeuge

Tool

Text

Font Size (48px)Font Weight

Color 1

#6366f1

Color 2

#ec4899

Direction

Gradient Text

CSS

.gradient-text {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(to right, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Anleitung

1Den Text in das Vorschau-Eingabefeld eingeben
2Anfangs- und Endfarben des Verlaufs auswählen
3Verlaufswinkel oder -richtung anpassen
4Den generierten CSS-Code kopieren und im Projekt anwenden

Häufig gestellte Fragen

CSS-Verlaufstext verwendet die background-clip: text-Technik. Ein Verlauf wird als Hintergrund gesetzt, dann wird der Hintergrund mit -webkit-background-clip: text und color: transparent auf die Textform beschnitten.

Verlaufstext wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Das -webkit-Präfix wird weiterhin für maximale Kompatibilität mit älteren WebKit-basierten Browsern empfohlen.