CSS-Verlaufsgenerator

Was ist CSS-Verlaufsgenerator?

Der CSS-Verlaufsgenerator ist ein kostenloses Tool im Browser für Webdesigner und Frontend-Entwickler, die Verläufe visuell erstellen möchten, statt die Syntax von Hand zu schreiben. Wähle linear, radial oder konisch – mit einer optionalen wiederholenden Variante – und bearbeite dann Farbstopps auf einer ziehbaren Vorschauleiste oder in Zeilen pro Stopp mit HEX-Farb- und Positionsfeldern. Radiale Verläufe bieten Kreis-/Ellipsenform, ein Größen-Schlüsselwort (closest-side, closest-corner, farthest-side, farthest-corner) und eine at X% Y%-Mitte, während konische einen Startwinkel und eine Mitte annehmen. Du kannst mehrere Verlaufsebenen durch Kommas getrennt zu einem Hintergrund stapeln, einen Zufallsverlauf erzeugen, kuratierte Palettenvorlagen anwenden, den Farbton jedes Stopps drehen und die einsatzbereite background-Regel kopieren.

So verwendest du CSS-Verlaufsgenerator

1. Wähle den Verlaufstyp – Linear, Radial oder Konisch – und schalte in den Optionen Wiederholend ein für ein wiederholendes Muster.
2. Ziehe die Stopps entlang der Vorschauleiste, um sie zu verschieben, klicke auf eine leere Stelle der Leiste, um einen Stopp hinzuzufügen, oder doppelklicke einen Stopp, um ihn zu entfernen.
3. Feinjustiere jeden Stopp mit seinen HEX-Farb- und Positionsfeldern oder nutze die Pipette (wo unterstützt), um eine Farbe vom Bildschirm aufzunehmen.
4. Lege bei radialen Verläufen Form (Kreis oder Ellipse), ein Größen-Schlüsselwort und die Mitte X/Y fest; bei konischen den Startwinkel und die Mitte.
5. Füge weitere Ebenen hinzu, um Verläufe zu einem Hintergrund zu stapeln, probiere Zufällig, wende eine Palette an oder drehe alle Farbtöne auf einmal.
6. Kopiere die erzeugte CSS-background-Regel und füge sie in dein Stylesheet ein.

Beispiele

Linear, 90deg, #4f86f7 bei 0% und #9333ea bei 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Ebene 1 linear 90deg; Ebene 2 radial circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Häufig gestellte Fragen

Welche Verlaufstypen und Optionen werden unterstützt?

Lineare, radiale und konische Verläufe, jeweils mit einer optionalen wiederholenden Variante. Radial ergänzt Kreis-/Ellipsenform, ein Größen-Schlüsselwort (closest-side, closest-corner, farthest-side, farthest-corner) und eine at X% Y%-Mitte; konisch ergänzt einen Startwinkel und eine Mitte. Du kannst außerdem mehrere Ebenen zu einem Hintergrund stapeln.

Wie funktioniert die ziehbare Stopp-Leiste?

Ziehe einen Stopp entlang der Leiste, um seine Position zu ändern, klicke auf einen leeren Teil der Leiste, um einen neuen Stopp mit interpolierter Farbe einzufügen, und doppelklicke einen Stopp, um ihn zu entfernen (mindestens zwei bleiben erhalten). Jeder Stopp hat unter der Leiste auch HEX-Farb- und Positionsfelder.

Kann ich eine Farbe vom Bildschirm aufnehmen?

Ja, in Browsern, die die EyeDropper-API unterstützen. Wenn verfügbar, erscheint neben jedem Stopp eine Pipetten-Schaltfläche; klicke sie an und wähle ein beliebiges Pixel auf dem Bildschirm. Du kannst stattdessen immer einen HEX-Wert eingeben oder das native Farbfeld verwenden.

Was bewirken Zufällig, die Paletten und Farbton drehen?

Zufällig ersetzt die aktive Ebene durch einen frischen Zufallsverlauf, die Palettenvorlagen tauschen die Stopps der aktiven Ebene gegen einen kuratierten Farbsatz, und Farbton drehen verschiebt den Farbton jedes Stopps in jeder Ebene auf einmal. Sie ändern den Verlauf nur, wenn du sie anklickst.

Werden meine Farben oder mein CSS irgendwohin hochgeladen?

Nein. Der Verlauf wird vollständig in deinem Browser mit lokaler Zeichenketten- und Farbberechnung erstellt – weder Farben, CSS noch Einstellungen werden je an einen Server gesendet, sodass es offline funktioniert und deine Arbeit privat bleibt.