CSS Verlaufstext-Generator
Beeindruckende Verlaufstext-Effekte mit Live-Vorschau erstellen. Bis zu 4 Farben wählen, Richtung festlegen und CSS mit einem Klick kopieren.
Gradient Text
CSS Output
background: linear-gradient(to right, #6366f1, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
Wie Verlaufstext in CSS funktioniert
Verlaufstext wird mit drei CSS-Eigenschaften erzeugt: einem linear-gradient als Hintergrund, -webkit-background-clip: text und -webkit-text-fill-color: transparent, damit der Farbverlauf durch den Text sichtbar wird.
Browser-Kompatibilität
Die Technik wird von allen modernen Browsern unterstützt. Der standardkonforme Wert background-clip: text (ohne Präfix) ist ebenfalls enthalten.
Verwandte Werkzeuge
CSS-Variablen-Generator
Vollständigen CSS-Custom-Properties-:root-Block für Farben, Abstände, Typografie und Border-Radius erstellen und kopieren.
CSS-Grid-Generator
CSS-Grid-Layouts visuell erstellen. Spalten, Zeilen, Abstände konfigurieren, Spans per Drag erstellen und CSS kopieren.
CSS-Border-Radius-Generator
Border-Radius-CSS mit unabhängigen Eckenreglern und Live-Vorschau visuell generieren.
CSS-Textschatten-Generator
Überlagerte CSS-Textschatten-Effekte mit Live-Vorschau und Einmal-Kopieren erstellen.
CSS-Filter-Generator
CSS-Filtereffekte generieren — Blur, Helligkeit, Kontrast, Farbton, Sättigung, Sepia und mehr — mit Live-Bildvorschau.
CSS-Clip-Path-Generator
CSS-clip-path-Formen interaktiv generieren — Polygone, Kreise und Ellipsen — mit Live-Vorschau. Kontrollpunkte verschieben.
CSS-Animations-Generator
CSS-@keyframe-Animationen visuell mit Timing-, Easing-, Verzögerungs- und Iterations-Reglern erstellen.
CSS-Flexbox-Generator
Visueller Flexbox-Playground — flex-direction, flex-wrap, justify-content, align-items und Elementeigenschaften konfigurieren.
CSS-Box-Shadow-Generator
CSS-Box-Schatten visuell mit Schiebereglern erstellen. Mehrere Schatten-Ebenen, Blur, Spread, Farbe und Deckkraft.
CSS-Farbverlauf-Generator
Schöne CSS-Linear- und Radialfarbverläufe visuell erstellen. Farben, Stops und Winkel anpassen — fertiges CSS kopieren.