Toolzi LogoToolzi

CSS Verlaufstext Generator

Erstellen Sie CSS-Verlaufstexteffekte sofort. Passen Sie Farben und Richtung an, sehen Sie eine Live-Vorschau und kopieren Sie den CSS-Code.

0%
100%

Vorschau

Hello World
48px

CSS-Code

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Was ist CSS-Verlaufstext?

CSS-Verlaufstext wendet einen Farbverlauf auf Text an, indem ein Verlauf als Hintergrund des Elements verwendet und mit background-clip: text auf die Textform zugeschnitten wird. Diese Technik erzeugt auffällige Typografie ohne Bilder.

So wenden Sie einen Verlauf auf Text in CSS an

Setzen Sie einen Verlaufshintergrund für Ihr Element, dann wenden Sie -webkit-background-clip: text und -webkit-text-fill-color: transparent an. Die Eigenschaft background-clip: text schneidet den Hintergrund auf den Text zu und zeigt den Verlauf durch die Buchstabenformen.

Browserkompatibilität

-webkit-background-clip: text wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Die Standard-Eigenschaft background-clip: text wird ebenfalls gut unterstützt. Schließen Sie immer beide Versionen ein.

Häufig gestellte Fragen

Wie erstelle ich Verlaufstext in CSS?
Wenden Sie einen Verlauf als Hintergrund an und verwenden Sie dann -webkit-background-clip: text und -webkit-text-fill-color: transparent, um den Verlauf durch den Text zu zeigen.
Funktioniert CSS-Verlaufstext in allen Browsern?
Ja. -webkit-background-clip: text wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.
Kann ich radiale oder konische Verläufe für Text verwenden?
Ja. Jeder CSS-Verlaufstyp (linear, radial, conic) kann als Hintergrund für Verlaufstext verwendet werden.
Warum brauche ich -webkit-text-fill-color: transparent?
-webkit-text-fill-color überschreibt die Textfarbe in WebKit-Browsern. Das Setzen auf transparent macht den Verlaufshintergrund durch den Text sichtbar.
Kann ich CSS-Verlaufstext animieren?
Ja. Sie können background-position animieren oder CSS @keyframes mit background-size verwenden, um animierte Verlaufstexteffekte zu erstellen.
Was ist der Unterschied zwischen color und -webkit-text-fill-color?
-webkit-text-fill-color hat in unterstützenden Browsern Vorrang vor color, sodass der Verlaufshintergrund durch den Text sichtbar wird.

Ähnliche Tools

CSS Gradient Generator →