ZenovayTools

CSS-Gradient-Textgenerator

Erstellen Sie Gradient-Texteffekte mit CSS. Wählen Sie Farben, Winkel und Gradient-Typ. Live-Vorschau mit kopierfertigem CSS-Code.

Presets

Text

Font size72px

Gradient

Angle90°

Color stops

#ec48990%
#a855f750%
#3b82f6100%

Preview

Gradient Text
CSS Output
background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;

So verwenden Sie CSS-Gradient-Textgenerator

  1. 1Geben Sie Ihren Text ein und passen Sie die Schriftgröße an.
  2. 2Wählen Sie Gradient-Typ und Winkel.
  3. 3Fügen Sie Farbstoppe hinzu und passen Sie Positionen an.
  4. 4Kopieren Sie das generierte CSS für Ihr Projekt.
ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.

Häufig gestellte Fragen

Wie funktioniert CSS-Gradient-Text?▾
CSS-Gradient-Text verwendet drei Eigenschaften: einen Gradient-Hintergrund, background-clip: text zum Clippen des Hintergrunds auf die Textform und color: transparent, um die Textfüllung transparent zu machen, damit der Gradient durchscheint. Diese Technik funktioniert mit jedem CSS-Gradient.
Welche Browser unterstützen Gradient-Text?▾
background-clip: text wird in allen modernen Browsern unterstützt. Chrome, Edge und Safari erfordern das -webkit- Präfix (-webkit-background-clip: text). Firefox unterstützt sowohl Präfix als auch unpräfixiert. Fügen Sie immer beide für maximale Kompatibilität ein.
Was macht background-clip: text?▾
background-clip: text clippt den Hintergrund des Elements auf den von seinem Textinhalt abgedeckten Bereich. Ohne dies füllt der Gradient das gesamte Element-Feld. Kombiniert mit einer transparenten Textfarbe, erstellt dies den Effekt von Text, der mit einem Gradient gefüllt ist.
Kann ich Gradient-Text animieren?▾
Ja. Verwenden Sie eine größere background-size (z. B. 200% 200%) und animieren Sie background-position mit @keyframes. Der Gradient gleitet hinter der textförmigen Clip-Maske, was einen fließenden Farbeffekt erzeugt. Verwenden Sie will-change: background-position für sanfte Animation.
Gibt es Barrierefreiheitsbedenken bei Gradient-Text?▾
Gradient-Text kann einen variablen Kontrast gegen den Hintergrund haben. Stellen Sie sicher, dass der dunkelste Teil des Gradienten die WCAG-Kontrastverhältnisse erfüllt (4,5:1 für normalen Text, 3:1 für großen Text). Bildschirmleser lesen den Text unabhängig vom visuellen Stil normal.