CSS Verlauf Generator

Lineare und radiale CSS-Verläufe visuell erstellen. Live-Vorschau, CSS-Code per Klick kopieren.

Typ
90°

Farbstopps

CSS-Code

Wie man den CSS-Verlaufsgenerator verwendet

  1. Wählen Sie den Typ Linear oder Radial.
  2. Für lineare Verläufe ziehen Sie den Richtung-Schieberegler, um den Winkel einzustellen.
  3. Wählen Sie Farben für jeden Stopp. Klicken Sie auf + Stopp hinzufügen für weitere. Vorschau und CSS aktualisieren sich sofort.
  4. Klicken Sie auf Kopieren, um die fertige CSS-Eigenschaft background zu kopieren.

CSS-Verlauf-Syntax

Lineare Verläufe verwenden linear-gradient(Winkel, Farbe1, Farbe2, ...). Der Winkel kann in Grad (90deg) oder als Schlüsselwort (to right) angegeben werden. Radiale Verläufe verwenden radial-gradient(Form, Farbe1, Farbe2, ...). Beide akzeptieren beliebig viele Farbstopps mit optionalen Positionen (z.B. red 20%, blue 80%).