CSS-Verlaufsgenerator – kostenlos
Erstellen Sie lineare, radiale und konische CSS-Verläufe mit Live-Vorschau. CSS mit einem Klick kopieren.
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);Vermeidet graue Mittelpunkte zwischen sehr unterschiedlichen Farben. Fügt eine einfache sRGB-Zeile als Rückfall für ältere Browser hinzu.
Voreinstellungen
Häufige Anwendungen
- Farbverläufe für Hero-Abschnitte erstellenEntwerfen Sie ganzseitige Farbverlaufshintergründe für Website-Hero-Abschnitte und Zielseiten.
- Farbverlauf-Schaltflächen und CTAs erstellenEntwerfen Sie auffällige Farbverläufe für Handlungsaufforderungen, die sich abheben.
- Farbverlaufshintergründe für Karten erstellenEntwerfen Sie Farbverlaufsfüllungen für Karten, Modelle, Seitenleisten und UI-Komponentenhintergründe.
- Farbverläufe für Social-Media-Grafiken erstellenEntwerfen Sie lebendige Farbverlaufshintergründe für Instagram-Beiträge, YouTube-Vorschaubilder und Twitter-Karten.
- Farbskalen für Diagramme erstellenGenerieren Sie Farbverlaufsskalen für Wärmekarten, Fortschrittsbalken und Datenvisualisierungen.
So funktioniert es
Der Verlaufsgenerator erzeugt CSS-Verlaufs-Zeichenketten direkt im Browser – keine Bibliothek, kein Server, kein Upload. Eine selbst geschriebene Funktion setzt aus Ihren Farbstopps und dem Winkel in Echtzeit die korrekte Syntax für linear-gradient, radial-gradient oder conic-gradient zusammen und formatiert das Ergebnis für das gewählte Ausgabeziel.
- 1Farbstopps und Richtung festlegenSie legen mit der nativen Farbauswahl des Browsers 2 bis 6 Farbstopps fest und positionieren jeden Stopp per Bereichsregler entlang der Achse von 0–100 %. Bei linearen und konischen Verläufen wählen Sie außerdem einen Winkel (0–360°); bei radialen Verläufen die Form (Ellipse oder Kreis) und das Größen-Schlüsselwort, das die Ausdehnung des Verlaufs steuert.
- 2buildCss setzt die Verlaufs-Zeichenkette zusammenBei jeder Änderung verbindet eine lokale Funktion buildCss Ihre Parameter zum korrekten CSS-Funktionsaufruf – z. B. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Es ist keine Bibliothek beteiligt; die Zeichenkette entsteht mit einfacher JavaScript-Template-Logik direkt aus dem Array der Stopps.
- 3Die Live-Vorschau nutzt einen Inline-StyleDie zusammengesetzte Verlaufs-Zeichenkette wird direkt als Inline-background-Style auf ein div angewendet, sodass die CSS-Engine des Browsers die Vorschau rendert. Es ist kein Canvas oder Bild beteiligt – Sie sehen buchstäblich die angewendete CSS-Eigenschaft.
- 4Kopierfertige Ausgabe in vier FormatenEine Formatauswahl wandelt dieselbe Verlaufs-Zeichenkette in reines CSS (background: ...), einen CSS-Block mit einfarbigem Fallback, eine Tailwind-Klasse mit beliebigem Wert oder eine SCSS-Variablendeklaration um. Ein Klick auf Kopieren schreibt die gewählte Ausgabe über navigator.clipboard.writeText in die Zwischenablage. Der aktuelle Verlauf wird außerdem im URL-Hash kodiert, damit Sie ihn als Lesezeichen speichern oder teilen können.
Ähnliche Tools
CSS-Grid-Generator
Entwerfen Sie visuell ein CSS-Grid — Spuren, Einheiten und Abstände — und kopieren Sie das generierte CSS und HTML.
CSS-Flexbox-Generator
Experimentieren Sie mit Flex-Richtung, Umbruch, Ausrichtung und Verteilung an Live-Elementen — und kopieren Sie das CSS.
Matrixrechner
Matrizen addieren, subtrahieren, multiplizieren, transponieren, invertieren und reduzieren, dazu Determinante, Rang, Eigenwerte und Lösen von Ax = b — bis 8×8, mit Kopieren per Fingertipp. Kostenlos und privat.