Verlaufssyntax von Hand zu schreiben ist knifflig: Winkel, Reihenfolge der Stopps und die Prozentangaben hängen zusammen, und ein Tippfehler zerstört stillschweigend das ganze background. Dieser Generator hält Vorschau und Code exakt synchron - was du siehst, ist byte-genau das CSS, das du kopierst. Er läuft komplett clientseitig, sodass nichts von deinem Design irgendwohin hochgeladen wird.
Kostenloser CSS Verlauf Generator
Läuft komplett in deinem Browser - kein Upload, keine Anmeldung.
Typ
Farbstopps
CSS-Code
Was ist ein CSS Verlauf Generator?
Ein CSS Verlauf Generator ist ein visuelles Werkzeug, das den Code für linear-gradient(), radial-gradient() oder conic-gradient() für dich erstellt. Wähle deine Farben, verschiebe die Stopps per Drag-and-Drop, stelle den Winkel ein und kopiere fertiges CSS zum Einfügen, während eine Live-Vorschau genau zeigt, was der Browser rendert. Alles läuft direkt im Browser.
So funktioniert’s
- 1Verlaufstyp wählen. Wähle linear, radial oder konisch. Linear zeigt einen Winkelregler; radial ergänzt Form (Kreis oder Ellipse) und Position; konisch hat einen Startwinkel und eine Position.
- 2Farbstopps festlegen. Klicke auf jede Farbfläche, um eine Farbe zu wählen, und ziehe den Regler, um den Stopp entlang des Verlaufs zu verschieben. Füge bis zu 8 Stopps hinzu oder entferne sie bis auf 2.
- 3Richtung anpassen. Ziehe den Winkelregler (0 bis 360 Grad) oder wähle ein Positions-Schlagwort. Die Vorschau aktualisiert sich live bei jeder Änderung.
- 4CSS kopieren. Klicke auf Kopieren, um die background-Deklaration samt einfarbiger Fallback-Zeile zu erhalten, und füge sie in dein Stylesheet ein.
Für wen
- Frontend-Entwickler, die den Hintergrund für einen Hero-Bereich, eine Karte oder einen Button brauchen und die exakte
linear-gradient()-Zeile wollen, ohne die Syntax auswendig zu kennen. - Web- und UI-Designer, die ein Mockup nachbauen: den Verlauf visuell rekonstruieren und das erzeugte CSS direkt an das Dev-Team weitergeben.
- Ersteller von E-Mails und Landingpages, die eine einfarbige Fallback-Zeile brauchen, damit das Design in alten Clients sauber degradiert - die Ausgabe enthält sie automatisch.
- CSS-Lernende, die live sehen wollen, wie Winkel, Farbstopps und Verlaufstyp das gerenderte Ergebnis verändern.
Häufige Fragen
Ist dieser CSS Verlauf Generator kostenlos?
Ja - 100 % kostenlos, ohne Anmeldung, ohne Wasserzeichen, ohne Limits. Erstelle beliebig viele Verläufe und kopiere das CSS direkt in dein Projekt.
Wird etwas an einen Server hochgeladen?
Nein. Der Verlauf wird komplett im Browser mit reinem JavaScript erstellt und angezeigt. Es werden keine Farben, kein Code und keine Nutzungsdaten irgendwohin gesendet.
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf mischt Farben entlang einer geraden Linie im gewählten Winkel. Ein radialer Verlauf strahlt von einem Mittelpunkt aus als Kreis oder Ellipse. Ein konischer Verlauf verteilt Farben rund um einen Mittelpunkt, wie ein Farbrad oder ein Tortendiagramm.
Wie funktionieren Farbstopps bei CSS-Verläufen?
Jeder Stopp verbindet eine Farbe mit einer Position von 0 % bis 100 % entlang der Verlaufslinie. Der Browser mischt sanft zwischen benachbarten Stopps. Zwei Stopps an derselben Position erzeugen statt einer Mischung eine harte Kante - nützlich für Streifen oder Tortendiagramm-Effekte.
Welche Browser unterstützen diese Verläufe?
Alle modernen Browser - Chrome, Firefox, Safari und Edge - unterstützen linear-gradient() und radial-gradient() ohne Präfix; conic-gradient() wird seit 2020 überall unterstützt. Der kopierte Code enthält zusätzlich einen einfarbigen Fallback für ältere Browser.
Kann ich den erzeugten Verlauf als Textfarbe verwenden?
Nicht direkt - Verläufe sind Bilder, keine Farben. Wende den Verlauf als background-image auf das Textelement an und ergänze background-clip: text sowie color: transparent, damit der Verlauf durch die Buchstaben sichtbar wird.
Warum zeigt mein Verlauf Streifenbildung (Banding)?
Banding entsteht, wenn zwei weit entfernte Stopps über eine lange Strecke ähnlicher Farbtöne ineinander übergehen und dabei die 8-Bit-Farbstufen sichtbar werden. Reduziere es, indem du einen zusätzlichen Farbstopp dazwischen einfügst, die Übergangsstrecke verkürzt oder Farben wählst, die sich auch in der Helligkeit und nicht nur im Farbton unterscheiden.