Farbverläufe in CSS
CSS-Verläufe sind Hintergrundbilder, die der Browser selbst berechnet: Sie skalieren ohne Qualitätsverlust, verursachen keine zusätzliche Bilddatei und lassen sich jederzeit im Code anpassen. Der Generator unterstützt alle drei Typen. linear-gradient verläuft entlang einer Linie in einem Winkel oder einer Richtung, radial-gradient breitet sich kreis- oder ellipsenförmig von einem Mittelpunkt aus, conic-gradient dreht sich um einen Punkt, wie bei einem Tortendiagramm.
Sie fügen beliebig viele Farbstopps hinzu und stellen für jeden Farbe, Deckkraft und Position in Prozent ein. Für lineare Verläufe wählen Sie Winkel oder Richtung, für radiale Verläufe die Form (Kreis oder Ellipse) und die Position des Mittelpunkts. Die Vorschau aktualisiert sich bei jeder Änderung sofort, sodass Sie das Ergebnis direkt sehen.
Fertige Vorlagen liefern einen schnellen Ausgangspunkt, den Sie anschließend anpassen. Mit transparenten Stopps entstehen Überblendungen über Bildern, mit zwei Stopps an derselben Position harte Kanten für Streifen. Der erzeugte Code hat die Form background: linear-gradient(...) und lässt sich mit einem Klick kopieren und in Ihr Stylesheet einfügen. Bei der Farbwahl lohnt ein Blick auf den Übergang: Zwischen zwei Komplementärfarben wie Blau und Orange entsteht in der Mitte oft ein grauer, matter Bereich. Ein zusätzlicher Farbstopp in einem kräftigen Zwischenton verhindert das. Für dezente Hintergründe genügen zwei nah verwandte Farbtöne. Mehrere Verläufe lassen sich in CSS übereinanderlegen, indem Sie sie durch Kommas getrennt in background angeben, etwa ein transparenter Verlauf über einem Bild.
Der Generator läuft vollständig in Ihrem Browser und ist kostenlos ohne Begrenzung nutzbar: Live-Vorschau und Kopieren des CSS stehen ohne Pro und ohne Anmeldung zur Verfügung.
So erstellen Sie einen CSS-Verlauf
- Verlaufstyp wählen: linear, radial oder konisch, oder mit einer Vorlage starten.
- Winkel bzw. Richtung einstellen, bei radialen Verläufen Form und Position.
- Farbstopps hinzufügen und Farbe, Deckkraft und Position festlegen.
- Das Ergebnis in der Live-Vorschau prüfen.
- CSS kopieren und in Ihr Stylesheet einfügen.
Wofür Sie CSS-Verläufe einsetzen
- Hintergründe für Hero-Bereiche und Landingpages.
- Buttons und Karten mit dezentem Farbverlauf.
- Transparente Überblendungen über Bildern für besser lesbaren Text.
- Streifen und harte Farbkanten ohne Bilddatei.
- Kreis- und Tortendiagramme mit conic-gradient.
Syntax der drei Verlaufstypen
- linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%): von oben links nach unten rechts.
- radial-gradient(circle at center, #fff 0%, #000 100%): kreisförmig vom Mittelpunkt aus.
- conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red): ein Farbkreis.
- Harte Kante: linear-gradient(90deg, #000 50%, #fff 50%).
- Deckkraft: Farben mit Alpha wie rgba(0, 0, 0, 0.5) erzeugen transparente Bereiche.
Häufig gestellte Fragen
Ist der Verlauf Generator kostenlos?
Ja, ohne Begrenzung. Live-Vorschau und Kopieren des CSS sind frei nutzbar, Pro ist dafür nicht nötig.
Welche Verlaufstypen gibt es?
Linear, radial (Kreis oder Ellipse) und konisch.
Wie viele Farbstopps sind möglich?
Beliebig viele, jeweils mit Farbe, Deckkraft und Position in Prozent.
Funktionieren CSS-Verläufe in allen Browsern?
Lineare und radiale Verläufe werden von allen aktuellen Browsern unterstützt, konische ebenfalls in allen modernen Versionen.
Kann ich einen Verlauf als Textfarbe nutzen?
Ja, mit background-clip: text und transparenter Textfarbe. Den Verlauf selbst erzeugen Sie hier.