Entwickler / CSS

CSS-Farbverlauf-Generator

Erstelle einen linearen, radialen oder kegelförmigen Verlauf mit Live-Vorschau, beliebig vielen Farbstopps und Voreinstellungen und kopiere anschließend das CSS.

CSS-Farbverlauf-Generator: Der Generator erstellt die background-Deklaration, die ein Browser für den angezeigten Verlauf benötigt: linear-gradient mit einem Winkel, radial-gradient mit einem Kreis oder einer Ellipse ausgehend von der Mitte oder conic-gradient, der sich ab einem Startwinkel rundherum erstreckt – jeweils mit den Farbstopps in der richtigen Reihenfolge. Als Fallback steht zuerst eine einheitliche Farbe für Browser, die zu alt sind, um Verläufe darzustellen. Eine neue Farbe wird an der breitesten Lücke eingefügt und aus ihren Nachbarfarben gemischt, damit der Verlauf keinen Sprung macht. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
CSS-VerlaufsgeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

Farbstopps
#ff7e5f0%
#feb47b100%

CSS

background: #ff7e5f;
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

Die erste Zeile verwendet eine einfarbige Füllung für sehr alte Browser; jeder aktuelle Browser verwendet den Verlauf in der zweiten Zeile.

Voreinstellungen

Verläufe mit weichen Übergängen

Ein Verlauf zwischen zwei sehr unterschiedlichen Farbtönen, etwa von Blau zu Gelb, führt in der Mitte durch ein mattes Grau. Ein zusätzlicher Farbstopp mit einer kräftigeren Farbe hält den Verlauf lebendig. Verläufe zwischen benachbarten Farbtönen, etwa von Orange zu Pink, benötigen dagegen selten Unterstützung.

Wähle Farben mit dem Farbkonverter aus oder überprüfe sie damit und verleihe einer Karte mit dem Box-Shadow-Generator mehr Tiefe.

Text auf einem Verlauf

Prüfe, ob der Text an beiden Enden des Verlaufs lesbar bleibt, nicht nur in der Mitte. Ein dunklerer Verlauf mit weißem Text oder ein dezenter Verlauf hinter dunklem Text ist sicherer als ein leuchtender Regenbogen.

So benutzt du es

  1. Wähle eine Voreinstellung oder entscheide dich für linear, radial oder konisch.
  2. Lege den Winkel fest und passe die Farben sowie ihre Positionen an. Füge eine Farbe für weitere Stopps hinzu.
  3. Kopiere das CSS in dein Stylesheet.

Datenschutz & Einschränkungen

Alles läuft in deinem Browser; dein letzter Verlauf wird nur in diesem Browser gespeichert.

Ähnliche Tools

BoxschattenFarbumrechnerCSS Minifier

Häufige Fragen

Was bedeutet der Winkel bei einem linearen Verlauf?

0deg verläuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten und 270deg von rechts nach links. Der Verlauf wird in diese Richtung gezeichnet. 135deg verläuft daher von der oberen linken Ecke zur unteren rechten Ecke.

Was ist ein Farbstopp?

Eine Farbe und die Position von 0 % bis 100 % entlang des Verlaufs, an der diese Farbe genau erreicht wird. Zwischen zwei Stopps werden die Farben miteinander vermischt. Wenn zwei Stopps an derselben Position liegen, entsteht statt eines weichen Übergangs eine harte Kante – so werden Streifen erzeugt.

Wie unterscheidet sich ein kegelförmiger Verlauf von einem radialen Verlauf?

Bei einem radialen Verlauf ändert sich die Farbe ausgehend von der Mitte nach außen in Ringen. Bei einem kegelförmigen Verlauf ändert sich die Farbe rund um die Mitte, ähnlich wie die Zeiger einer Uhr. Das eignet sich für Farbräder und Kreisdiagramme.

Brauche ich weiterhin -webkit-Präfixe?

Nein. Jeder aktuelle Browser unterstützt linear-gradient und radial-gradient ohne Präfix. conic-gradient funktioniert in allen aktuellen Browsern seit 2021. Die Fallback-Farbe in der ersten Zeile ist nur für deutlich ältere Browser vorgesehen.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig