Zum Inhalt springen

CSS-Verlaufsgenerator

Erstelle lineare, radiale oder konische Verläufe mit Live-Vorschau, passe Farben und Stopps an und kopiere den CSS- oder Tailwind-Code zum Einfügen.

Verlaufstyp

Winkel

90°

Farbstopps (2)

  • #2C71DE
  • #051938

Klicken zum Hinzufügen · Ziehen zum Verschieben

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

Fertige CSS-Verläufe

Klicke auf einen, um ihn in den Editor zu laden und nach Wunsch anzupassen.

Was ist ein CSS-Verlauf und wie funktioniert er

Ein Farbverlauf (Gradient) ist ein sanfter Übergang zwischen zwei oder mehr Farben, der über die CSS-Eigenschaft background als Hintergrund genutzt wird. Statt einer Vollfarbe zeichnet der Browser eine fließende Mischung zwischen den Farben, die du festlegst, in der gewählten Richtung oder Form.

Jede Farbe des Verlaufs wird über einen Farbstopp definiert: den Farbcode und die Position in Prozent, an der diese Farbe ganz rein ist. Zwischen zwei Stopps berechnet der Browser den Übergang automatisch. Zwei Stopps reichen für eine einfache Mischung, mit mehreren erhältst du einen nuancierteren Verlauf.

Linear

Die Farben gehen geradlinig ineinander über, im festgelegten Winkel. Der häufigste Typ, ideal für Hintergründe mit klarer Richtung, von oben nach unten oder diagonal.

linear-gradient(90deg, #F97316, #FBBF24)

Radial

Die Farben breiten sich kreisförmig von einem Mittelpunkt nach außen aus. Gut für Fokus-, Licht- oder Tiefeneffekte.

radial-gradient(circle, #FDE68A, #F97316 70%)

Konisch

Die Farben drehen sich um einen Mittelpunkt, wie Uhrzeiger. Der seltenste Typ, nützlich für Farbräder, Fortschrittsanzeigen oder experimentellere Effekte.

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

So schreibt man einen Verlauf in CSS

Ein linearer Verlauf wird mit der Funktion linear-gradient() in der Eigenschaft background deklariert. Das sind seine Teile:

135deg
Die Richtung. 0deg zeigt nach oben, 90deg nach rechts und 180deg nach unten. Du kannst auch to right oder to bottom right schreiben.
#FF5F6D
Jede Farbe des Verlaufs, in jedem CSS-Format: HEX, rgb(), hsl() oder oklch().
0%
Die Position des Stopps: wo diese Farbe rein ist. Lässt du sie weg, verteilt der Browser die Farben gleichmäßig.

Radiale Verläufe nutzen radial-gradient(circle, …) und konische conic-gradient(from 90deg, …), mit denselben Farbstopps.

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

So verwendest du den Generator

  1. Typ wählen

    Linear, radial oder konisch. Bei linearen und konischen Verläufen stellst du den Winkel mit dem Regler oder den Richtungsbuttons ein.

  2. Farben und Stopps anpassen

    Wähle einen Stopp, um seine Farbe zu ändern, ziehe ihn auf der Leiste, um ihn zu verschieben, oder klicke auf die Leiste, um einen weiteren hinzuzufügen. Bis zu acht Stopps.

  3. Code kopieren

    Kopiere das CSS oder die entsprechenden Tailwind-Klassen und füge sie in dein Projekt ein. Du kannst auch die einzelnen Farben exportieren.

Tipps für schöne Verläufe

  • Nahe Farben im Farbkreis

    Benachbarte Farben im Farbkreis erzeugen sanfte, natürliche Übergänge.

  • Die graue Zone vermeiden

    Zwischen zwei Gegenfarben wird die Mitte oft trüb. Ein kräftigerer Zwischenstopp verhindert das.

  • Wenige Stopps

    Zwei oder drei Farben reichen für die meisten Hintergründe. Mehr Stopps wirken oft weniger elegant.

  • Lesbarer Text darüber

    Prüfe den Kontrast des Textes zur hellsten und zur dunkelsten Farbe des Verlaufs.

Häufige Fragen

Nutze die Eigenschaft background mit der Funktion linear-gradient(), radial-gradient() oder conic-gradient() und gib Richtung und Farben an. Zum Beispiel: background: linear-gradient(90deg, #2193B0, #6DD5ED);

Jede der Farben, aus denen der Verlauf besteht, zusammen mit der Position (in Prozent), an der diese Farbe rein erscheint. Zwischen zwei Stopps berechnet der Browser den Übergang automatisch.

Der lineare verläuft geradlinig in einem Winkel. Der radiale breitet sich kreisförmig von einem Mittelpunkt aus. Der konische dreht sich um einen Mittelpunkt, wie Uhrzeiger.

So viele du brauchst, per Klick auf die Vorschauleiste. Mit zwei Stopps erhältst du einen einfachen Übergang, mit mehr kannst du Verläufe mit mehreren Tönen erstellen.

Ja. Neben dem Standard-CSS-Code bietet der Generator das Äquivalent in Tailwind-Syntax zum Kopieren.

Ja, linear-gradient, radial-gradient und conic-gradient sind Standard-CSS-Eigenschaften und werden von allen modernen Browsern unterstützt.

Wende den Verlauf auf body an und gib ihm mindestens die Fensterhöhe: body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

Den Wechsel zwischen zwei Verläufen kann man nicht direkt animieren, wohl aber den Verlauf bewegen: Gib ihm eine background-size größer als das Element (z. B. 200 %) und animiere background-position mit einer Transition oder @keyframes.

Verwandte Tools