Verlaufsgenerator
Der CSS Gradient Generator erstellt lineare, radiale und konische Farbverläufe aus zwei oder drei Farben – mit Live-Vorschau und kopierfertigem background-CSS.
Über dieses Tool
Der CSS Gradient Generator erstellt lineare, radiale und konische Farbverläufe aus zwei oder drei Farben – mit Live-Vorschau und kopierfertigem background-CSS.
So funktioniert’s
- Wähle den Verlaufstyp: linear, radial oder konisch.
- Stelle den Winkel mit dem Regler ein (0–360°).
- Wähle zwei Farben oder aktiviere „3 Farben verwenden“, um eine dritte hinzuzufügen.
- Klicke auf „CSS kopieren“ und füge die background-Regel in dein Stylesheet ein.
Gut zu wissen
- linear-gradient() mischt Farben entlang einer geraden Linie, deren Richtung ein Winkel bestimmt; 90deg verläuft von links nach rechts.
- radial-gradient(circle, …) verteilt die Farben von der Mitte nach außen.
- conic-gradient(from <angle>, …) lässt die Farben um einen Mittelpunkt kreisen – nützlich für Tortendiagramme und Farbkreise.
- CSS-Verläufe sind vom Browser gerenderte Bilder, sie skalieren also auf jede Größe ohne zusätzliches Dateigewicht.
- Alle drei Gradient-Funktionen werden von allen aktuellen großen Browsern unterstützt.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie erstelle ich einen CSS-Farbverlauf?
Verwende eine Gradient-Funktion als Hintergrund, zum Beispiel background: linear-gradient(135deg, #1db954, #0a1628). Dieses Tool schreibt dir diese Zeile aus den gewählten Farben und dem Winkel.
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Lineare Verläufe ändern die Farbe entlang einer Linie, radiale strahlen von einem Mittelpunkt aus, und konische drehen sich wie Uhrzeiger um einen Mittelpunkt.
Kann ein Verlauf mehr als zwei Farben haben?
Ja. CSS-Verläufe akzeptieren beliebig viele Farbstopps. Dieser Generator unterstützt zwei oder drei Farben; weitere Stopps kannst du im kopierten CSS von Hand ergänzen.
Machen CSS-Verläufe eine Website langsamer?
Nicht spürbar. Sie werden vom Browser gezeichnet und erfordern keinen Bild-Download, sind also meist leichter als Verlaufsbilder.