Tool overview
Was ist CSS-Verlauf-Generator?
CSS-Verlauf-Generator ist ein Tool, mit dem Sie mehrstufige lineare, radiale und konische CSS-Verläufe mit OKLCH und Tailwind-Export gestalten.
Warum CSS-Verlauf-Generator verwenden?
Es verbessert die Lesbarkeit und beschleunigt Ihren Workflow, wenn Sie mehrstufige lineare, radiale und konische CSS-Verläufe mit OKLCH und Tailwind-Export gestalten—vollständig im Browser ohne Server-Uploads.
Hauptfunktionen
Clientseitige Privatsphäre, sofortige Ergebnisse und Ein-Klick-Kopie für cSS-Verlauf-Generator. mehrstufige lineare, radiale und konische CSS-Verläufe mit OKLCH und Tailwind-Export gestalten
Anwendung
Befolgen Sie diese Schritte für genaue Ergebnisse mit dem Tool oben.
- Wählen Sie Linear, Radial oder Konisch und fügen Sie Farbstopps in der Live-Vorschau hinzu.
- Stellen Sie Winkel oder Mittenposition ein, aktivieren Sie OKLCH für weichere Verläufe und vergleichen Sie bei Bedarf mit sRGB.
- Kopieren Sie CSS, Tailwind-Arbitrary-Klassen oder CSS-Custom-Properties — oder einen Share-Link zum späteren Wiederherstellen.
- Fügen Sie eine bestehende background: linear-gradient(...)-Deklaration unter CSS importieren ein, um Stopps zu rekonstruieren.
- Öffnen Sie Farbkonverter oder WCAG-Kontrast unter Verwandte Tools, um Stoppfarben zu prüfen.
Leitfaden zum CSS-Verlauf-Generator: linear-gradient, OKLCH, konisch & Tailwind
Mit diesem kostenlosen Generator erzeugen Sie mehrstufiges linear-gradient-, radial-gradient- und conic-gradient-CSS mit CSS Color 4 OKLCH-Interpolation, @supports-Fallbacks, Tailwind-Klassen und teilbaren URLs.
Lineare Verläufe
Winkel in Grad mit unbegrenzt vielen Farbstopps, Positionen und Deckkraft. Optionale in-oklch-Interpolation.
Radiale Verläufe
Kreis oder Ellipse von einem Prozentzentrum mit Mehrfach-Farbstopps.
Konische Verläufe
Farben um ein Zentrum streichen mit from-Winkel für Kreisdiagramme und Regenbogeneffekte.
Mehrfachfarbe & Deckkraft
Stopps hinzufügen, entfernen, umkehren oder zufällig setzen; eingefügtes Hintergrund-CSS importieren.
OKLCH-Farbinterpolation
Standardmäßig wahrnehmungsbasierte Verläufe mit sRGB-Fallback über @supports für ältere Browser.
CSS, Tailwind & CSS-Variablen
Als Hintergrund-CSS, Tailwind-Arbitrary-Klassen oder :root-Custom-Properties exportieren.
Teilbare URLs & CSS-Import
Konfiguration in ?g= / #g= synchronisieren und aus eingefügtem Verlaufs-CSS wiederherstellen.
Barrierefreiheits-Übergabe
Ausgewählte Stopps tief verlinken zu WCAG-Kontrast und Farbkonverter.
CSS-Verlaufstext
Verlauf exportieren und mit background-clip: text sowie transparenter Textfarbe anwenden (-webkit-background-clip: text für Safari).
CSS-Verlaufsrahmen
Exportierten Verlauf auf Wrapper mit Padding und innerem Volltonhintergrund nutzen, oder border-image mit dem Verlauf.
CSS-Verläufe animieren
Statisches Verlaufs-CSS hier exportieren und background-position oder Custom Properties im Stylesheet animieren.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
Häufig gestellte Fragen
Antworten zu typischen Fehlern und Datenschutzfragen.
Offizielle Dokumentation & Referenzen
Autoritative Spezifikationen und Plattformdokumentation für dieses Tool.