CSS-Verlaufsgenerator
Gestalte schöne lineare, radiale und konische CSS-Verläufe mit Live-Vorschau und kopiere den Code mit einem Klick
Live-Vorschau
Verlaufstyp
Farbstopps
Vorlagen
CSS-Code
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Alles wird lokal in deinem Browser erzeugt. Nichts wird an einen Server gesendet.
Über dieses Tool
Mit diesem CSS-Verlaufsgenerator gestaltest du weiche Farbübergänge visuell und kopierst fertiges CSS mit einem Klick. Wähle einen linearen, radialen oder konischen Verlauf, füge beliebig viele Farbstopps hinzu und feine die Farbe jedes Stopps mit einem nativen Farbwähler oder HEX-Feld sowie einer Position von 0 bis 100 Prozent ab. Für lineare Verläufe kannst du jeden Winkel von 0 bis 360 Grad einstellen oder die schnellen Richtungstasten nutzen; radiale Verläufe unterstützen Kreis- oder Ellipsenformen, und konische Verläufe drehen Farben um einen Mittelpunkt. Eine große Live-Vorschau aktualisiert sich sofort, sodass du genau siehst, was du erstellst. Starte mit einer der kuratierten Vorlagen, drücke die Zufallstaste für neue Ideen und kopiere dann die erzeugte background-Eigenschaft in dein Stylesheet. Alles läuft lokal im Browser, daher ist es schnell, privat und funktioniert offline.
So funktioniert's
- 1 Wähle einen Verlaufstyp - linear, radial oder konisch.
- 2 Füge Farbstopps hinzu und lege für jeden Stopp Farbe (Wähler oder HEX) und Position von 0 bis 100% fest.
- 3 Passe den Winkel für lineare und konische Verläufe oder die Form für radiale an - oder lade eine Vorlage.
- 4 Beobachte die Live-Vorschau und klicke auf CSS kopieren, um die background-Eigenschaft in dein Projekt einzufügen.
Wie es funktioniert
Das Tool stellt aus deinen Einstellungen eine standardmäßige CSS-Verlaufsfunktion zusammen. Lineare Verläufe nutzen linear-gradient(Winkel, Stopps), wobei der Winkel die Verlaufslinie ausrichtet und jeder Farbstopp als Farbe gefolgt von einer Prozentposition geschrieben wird. Radiale Verläufe nutzen radial-gradient(Form at center, Stopps), um Farben von der Mitte nach außen zu verteilen, und konische Verläufe nutzen conic-gradient(from Winkel at center, Stopps), um Farben um einen Punkt zu drehen. Farbstopps werden vor der Ausgabe automatisch nach Position sortiert, sodass die Reihenfolge der Hinzufügung keine Rolle spielt. Positionen werden auf 0-100% begrenzt und es bleiben stets mindestens zwei Stopps erhalten, sodass das erzeugte CSS immer gültig ist. Das Ergebnis ist eine einfache background-Deklaration, die du ohne Präfixe in jeden modernen Browser einfügen kannst.
Häufig gestellte Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf mischt Farben entlang einer geraden Linie, deren Richtung du mit einem Winkel festlegst. Ein radialer Verlauf verteilt Farben von einem Mittelpunkt aus kreis- oder ellipsenförmig nach außen. Ein konischer Verlauf dreht Farben um einen Mittelpunkt, praktisch für Tortendiagramme, Farbräder und Winkeleffekte. Alle drei sind natives CSS und werden von jedem modernen Browser unterstützt.
Wie viele Farbstopps kann ich hinzufügen?
Du kannst so viele Farbstopps hinzufügen, wie du brauchst; das Tool behält immer mindestens zwei bei, damit der Verlauf gültig bleibt. Jeder Stopp hat eine eigene Farbe und eine Position von 0 bis 100 Prozent. Mehr Stopps ermöglichen Regenbögen, mehrfarbige Hintergründe und weiche mehrfarbige Übergänge.
Was bewirkt die Winkelsteuerung?
Bei einem linearen Verlauf legt der Winkel die Richtung der Farblinie fest: 0 Grad zeigt nach oben, 90 nach rechts, 180 nach unten und 270 nach links, sodass du die Mischung beliebig ausrichten kannst. Bei einem konischen Verlauf legt der Winkel die Startdrehung des Sweeps fest. Du kannst den Schieberegler ziehen, einen genauen Wert eingeben oder die schnellen Richtungstasten nutzen.
Ist das erzeugte CSS produktionsreif?
Ja. Die Ausgabe ist eine standardmäßige background-Eigenschaft mit nativen Verlaufsfunktionen, die in allen aktuellen Browsern ohne Hersteller-Präfixe funktionieren. Kopiere einfach die Zeile und füge sie in dein Stylesheet, Inline-Style oder deine Komponente ein. Du kannst den Eigenschaftsnamen in background-image ändern, wenn du eine separate Hintergrundfarbe behalten möchtest.
Werden meine Daten irgendwohin gesendet?
Nein. Der gesamte Generator läuft mit JavaScript und CSS in deinem Browser. Nichts über deine Farben oder Verläufe wird hochgeladen oder auf einem Server gespeichert, daher ist das Tool privat und funktioniert weiter, selbst wenn du die Internetverbindung trennst.
Verwandte Tools und Anwendungen
Kombiniere den Verlaufsgenerator mit dem Farbkonverter, um exakte HEX-, RGB- und HSL-Werte zu wählen, und mit dem Kontrastprüfer, um sicherzustellen, dass Text über deinem Verlauf lesbar bleibt. Designer und Entwickler nutzen ihn, um Hero-Hintergründe, Buttons, Karten, Badges und dekorative Effekte für Websites und Apps zu erstellen.