CSS-Verlaufsgenerator — lineare und radiale Farbverläufe
Zweifarbige Verläufe in der Vorschau ansehen und die CSS-background-Deklaration kopieren
Verarbeitung im Browser · kein Hochladen
Die Farbpositionen reichen von 0 bis 100 %; der Start darf nicht hinter dem Ende liegen. Radiale Verläufe breiten sich von der Mitte nach außen aus.
Verlaufs-CSS erstellt.
So funktioniert es
- Wählen Sie einen linearen oder radialen Verlauf.
- Wählen Sie Start- und Endfarbe.
- Legen Sie bei einem linearen Verlauf den Winkel fest und passen Sie dann beide Farbpositionen zwischen 0 und 100 % an.
- Prüfen Sie die Vorschau und kopieren Sie das CSS in die Stilregel Ihres Elements.
Farbstopps und Richtung
Farben werden als sechsstellige Hexadezimalwerte ausgegeben. Vor dem ersten Stopp behält der Verlauf die erste Farbe, nach dem zweiten Stopp die zweite. Dazwischen liegt der Übergang. Die Startposition darf nicht größer als die Endposition sein.
Lineare Verläufe folgen dem gewählten Winkel. Radiale Verläufe verwenden radial-gradient(circle, ...) und breiten sich von der Mitte nach außen aus; der Winkel wird im radialen Modus nicht verwendet. Hat Ihr endgültiges Element andere Abmessungen als die Vorschau, kann sich die sichtbare Farbverteilung ändern.
Beispiele
linear-gradient(90deg, #6366f1 0%, #ec4899 100%)verläuft von Violett links zu Pink rechts.- Stehen beide Stopps auf 50 %, entsteht eine scharfe Trennlinie zwischen den Farben.
- Im radialen Modus vergrößert ein erster Stopp bei 25 % die einfarbige Fläche um die Mitte, bevor der Übergang beginnt.
Ergebnis anwenden
Die Deklaration verwendet die Kurzschreibweise background, die andere Hintergrundeigenschaften desselben Elements zurücksetzen kann. Prüfen Sie bestehende Regeln, bevor Sie sie in ein Stylesheet einfügen.
Steht Text auf dem Verlauf, prüfen Sie den Kontrast in allen Bereichen hinter dem Text, nicht nur an einem Ende. Die Vorschau zeigt den Hintergrund, ersetzt aber keine vollständige Barrierefreiheitsprüfung. Der Verlauf wird in Ihrem Browser erzeugt.
Häufige Fragen
In welche Richtung zeigen CSS-Winkel?
Bei einem linearen Verlauf zeigt 0 Grad nach oben, 90 Grad nach rechts und 180 Grad nach unten. Der Winkel bestimmt, in welche Richtung die Farben verlaufen.
Was passiert, wenn beide Farbstopps dieselbe Position haben?
Die Farbe wechselt an dieser Stelle schlagartig – es entsteht eine harte Kante statt eines weichen Übergangs.
Lässt sich ein Bild exportieren?
Nein. Das Tool erzeugt eine CSS-background-Deklaration. Der Browser zeichnet den Verlauf passend zur Größe des Elements, auf das Sie ihn anwenden.
Kann ich mehr als zwei Farben verwenden?
Hier werden zwei deckende Farben unterstützt. Weitere Farbstopps oder Transparenz ergänzen Sie, indem Sie das kopierte CSS bearbeiten.
