CSS Gradient Generator – Lineare, radiale & konische Farbverläufe

So nutzt du: CSS Gradient Generator

1Wähle einen Verlaufstyp — Linear, Radial oder Konisch — oder starte mit einer Vorlage.

2Wähle die Farben für die Stopps und ziehe die Regler, um die Position der einzelnen Farben festzulegen.

3Stelle den Winkel (oder die Form für radiale Verläufe) ein und füge bis zu acht Farbstopps hinzu.

4Kopiere das CSS und füge es in dein Stylesheet ein.

CSS-Farbverläufe visuell erstellen

Farbverläufe verleihen Buttons, Hero-Bereichen, Cards und Hintergründen Tiefe und Farbe – ganz ohne Bilddateien. Sie von Hand zu schreiben heißt jedoch oft, Winkel und Prozentwerte zu raten und die Seite ständig neu zu laden. Mit diesem CSS Gradient Generator kannst du Farbverläufe visuell mit Live-Vorschau erstellen und erhältst sauberen, kopierfertigen CSS-Code für alle modernen Browser.

Funktionen

Drei Verlaufsarten: linear, radial (Kreis oder Ellipse) und konisch.
Bis zu acht Farb-Stopps mit frei verschiebbaren Positionen.
Winkel-Regler für lineare und konische Verläufe.
Vorlagen und Zufalls-Button für schnelle Inspiration.
Einfarbiger Fallback direkt im CSS enthalten.
Code kopieren mit nur einem Klick.

CSS-Code verwenden

Füge den Code in die CSS-Regel des Elements ein, das du stylen möchtest:

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

Farbverläufe verhalten sich in CSS wie Bilder. Du kannst sie also auch in background-image nutzen, mehrere Verläufe durch Kommas getrennt übereinanderlegen oder sie mit einem Foto kombinieren: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); dunkelt ein Bild ab, damit weißer Text darauf gut lesbar bleibt.

Design-Tipps

Dezent bleiben. Zwei benachbarte Farbtöne (Blau zu Lila, Orange zu Pink) wirken harmonischer und moderner als Komplementärfarben.
Kontrast prüfen. Wenn Text auf dem Verlauf liegt, muss er an beiden Enden gut lesbar sein — teste die Farben mit dem Farbkonverter, der die Kontrastverhältnisse anzeigt.
Farben aus einem Markenbild auslesen mit dem Bild-Farbwähler.
Tiefe erzeugen für Cards und Buttons mit dem Box Shadow Generator.

Häufige Fragen

Warum gibt es im CSS zwei Zeilen für den Hintergrund?

Die erste Zeile setzt eine einfarbige Fallback-Farbe für die wenigen Browser oder E-Mail-Clients, die keine Verläufe unterstützen. Browser, die Verläufe unterstützen, nutzen die zweite Zeile, welche die erste überschreibt.

Was bedeuten die Winkel bei einem linearen Verlauf?

0° verläuft von unten nach oben, 90° von links nach rechts, 180° von oben nach unten und 270° von rechts nach links. Winkel dazwischen verlaufen diagonal – 135° geht von oben links nach unten rechts.

Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?

Ein linearer Verlauf ändert die Farbe entlang einer geraden Linie. Ein radialer Verlauf breitet sich kreis- oder ellipsenförmig von der Mitte nach außen aus. Ein konischer Verlauf dreht sich um den Mittelpunkt wie ein Farbkreis oder Tortendiagramm.

Brauche ich Vendor-Präfixe wie -webkit-?

Nein. Lineare und radiale Verläufe funktionieren in jedem aktuellen Browser ohne Präfix, und konische Verläufe werden von allen modernen Browsern unterstützt, die seit 2020 veröffentlicht wurden.

Wie erstelle ich eine harte Kante statt eines weichen Übergangs?

Setze zwei Farbstopps mit unterschiedlichen Farben auf dieselbe Position. Rot bei 50% und Blau bei 50% erzeugt zum Beispiel eine scharfe Trennung in der Mitte.