CSS-Verlauf-Generator
Verlaufstyp wählen, Farbstopps verschieben, CSS kopieren. Die Vorschau aktualisiert sich sofort, und nichts verlässt Ihren Browser.
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Über dieses Tool
Ein CSS-Verlauf ist ein Bild, das der Browser aus Farbstopps zeichnet; er skaliert deshalb auf jede Elementgröße, ohne dass eine Datei geladen wird. Lineare Verläufe folgen einem Winkel, radiale breiten sich von einem Mittelpunkt aus, konische drehen sich darum — praktisch für Ringdiagramme und Farbkreise.
Stopp-Positionen sind Prozentwerte entlang dieses Wegs. Zwei Stopps an derselben Position ergeben eine harte Kante statt eines Übergangs; so entstehen Streifen und geteilte Hintergründe. Alle Browser seit 2016 unterstützen die drei Funktionen ohne Präfix.
Häufige Fragen
- Was bedeutet der Winkel?
- 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten. Es ist die Richtung, in die der Verlauf läuft, nicht die, aus der er kommt.
- Wie bekomme ich eine harte Kante statt eines Übergangs?
- Geben Sie zwei Stopps dieselbe Position, etwa Rot 50 % und Blau 50 %. Die Farbe wechselt dann ohne Verlauf.
- Kann ich einen Verlauf auf Text anwenden?
- Ja: Verlauf als background setzen, dann background-clip: text und color: transparent am selben Element ergänzen.