CSS Verlauf Generator

So verwenden Sie den CSS-Verlaufsgenerator

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: Farbübergang entlang einer geraden Linie:

background: linear-gradient(90deg, #FF5733, #3498DB);

Der Winkel kann in Grad (0deg = unten nach oben, 90deg = links nach rechts) oder als Schlüsselwort (to right, to bottom right) angegeben werden.

Radiale Verläufe: Farbübergang nach außen von einem Mittelpunkt:

background: radial-gradient(circle, #FF5733, #3498DB);

Farbstopps

Beide Verlaufstypen akzeptieren beliebig viele Farbstopps mit optionalen Positionen:

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Verwendung von Verläufen in CSS

• Hintergrund: background: linear-gradient(...);
• Verlaufstext: Kombination von background-clip: text und -webkit-text-fill-color: transparent
• Ausblendungseffekte: Verlauf als mask-image für Übergangseffekte an Elementrändern
• Verlaufsbordüre: border-image mit Verlauf

Browser-Kompatibilität

linear-gradient und radial-gradient werden von allen modernen Browsern ab IE 10 unterstützt. Kein Vendor-Präfix erforderlich.