Was ist Verlaufsgenerator?

Ein visueller CSS-Gradient-Builder, mit dem du lineare, radiale und konische Verläufe mit beliebig vielen Farbstopps erstellen kannst. Passe Winkel, Positionen und Farben in Echtzeit an und kopiere den CSS-Code mit einem Klick.

Wähle zwischen linearen, radialen und konischen Verläufen, lege einen Winkel von 0° bis 360° fest und füge so viele Farbstopps hinzu, wie du brauchst — mit eigener Deckkraft je Stopp für transparente Overlays. Starte mit einer kuratierten Vorlage wie Sonnenuntergang, Instagram oder Ozean und feile dann an den Farben. Bei radialen Verläufen wählst du eine Kreis- oder Ellipsenform und ein Ausdehnungs-Schlüsselwort, stellst die Mischung auf OKLab oder OKLCH für eine weichere moderne Interpolation um oder legst eine Easing-Kurve an. Schalte „Animieren“ ein und du erhältst eine fertige @keyframes-Schleife zum Einfügen für einen lebendigen Hintergrund. Heraus kommt reines CSS, das du in ein Stylesheet, die Tailwind-Konfiguration oder dein Designtool einfügst.

Anleitung

1. Schritt 1 — Wähle den Verlaufstyp (linear, radial oder konisch) und lege die Richtung oder den Winkel mit dem Winkelschieberegler oder den Voreinstellungsschaltflächen fest.
2. Schritt 2 — Füge Farbstopps hinzu, indem du auf die Verlaufsleiste klickst. Passe Farbe und Position jedes Stopps per Drag-and-Drop oder durch direkte Werteingabe an.
3. Schritt 3 — Sieh dir eine Live-Vorschau des Verlaufs an und kopiere dann den generierten CSS-Code in die Zwischenablage oder lade ihn als CSS-Datei herunter.

Wann verwenden

• Hero-Bereiche, Buttons und Kartenhintergründe gestalten, ohne Photoshop zu öffnen.
• Markenfarben einheitlich über Website, E-Mail und Folien halten.
• Den CSS-Effekt vorab testen, bevor die Spezifikation zur Entwicklung wandert.

Ergebnis

Angenommen, du möchtest einen Sonnenuntergangs-Hintergrund für deinen Hero-Bereich. Wähle einen linearen Verlauf mit 135°, setze Orange auf 0%, Rosa auf 50% und Lila auf 100%, dann kopiere den CSS-Code in dein Stylesheet.

Häufige Fragen

Worin unterscheiden sich linearer, radialer und konischer Verlauf?

Linear läuft die Farbe in einer geraden Linie unter dem gesetzten Winkel. Radial strahlt von einem Mittelpunkt nach außen, wie ein Sonnenkreis. Konisch dreht die Farben um einen zentralen Punkt — ideal für Tortendiagramme oder Farbräder.

Wie viele Farbstopps darf ich setzen?

Es gibt keine harte Grenze. Die meisten Designs nutzen zwei bis vier Stopps. Ab fünf oder sechs verschmieren die Farben ineinander und der Verlauf verliert die klaren Übergänge, die du eigentlich willst.

Warum sehe ich auf dunklem Hintergrund Streifen (Banding)?

Streifen treten auf, wenn benachbarte Farben eine sehr ähnliche Helligkeit haben. Erhöhe den Kontrast zwischen den Stopps, schalte die Farbinterpolation auf OKLCH oder OKLab (perzeptuell) um oder lege eine feine Rauschebene per CSS darüber.

Kann ich die Verläufe in Figma oder Sketch verwenden?

Der CSS-Code selbst lässt sich nicht direkt einfügen, aber Farbwerte und Positionen lassen sich eins zu eins übertragen. Kopiere Hex und Prozentsatz jedes Stopps in den Verlaufs-Editor deines Designtools.

Was bewirkt der Winkel genau?

Beim linearen Verlauf zeigt 0° nach oben, der Winkel dreht im Uhrzeigersinn — 90° geht von links nach rechts, 180° von oben nach unten. Beim konischen Verlauf legt der Winkel fest, an welcher Stelle des Kreises der Übergang beginnt.

Ähnliche Tools