DE

CSS-Verlauf-Generator

Wählen Sie die Art des Verlaufs, die Richtung und die Farben. Farbstopps setzen Sie mit Farbwähler und Regler, weitere fügen Sie mit „+ Farbstopp“ hinzu. Der Generator schreibt den Verlauf in knapper, gültiger CSS-Syntax und ergänzt eine deckende Ersatzfarbe für background-color, damit Text auch ohne Verlauf lesbar bleibt.

Quelle: css-images-3, § 3.1, W3C – CSS Images Module Level 3: Linear Gradients. Stand: .

Verlauf gestalten

background-color: #675BF0;
background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
°
0° = nach oben, 90° = nach rechts, 180° = nach unten (Standard)
Eine Zeile je Stopp: Farbe und optional Position in %, z. B. #3B82F6 0%
Leer lassen: Mittelwert der Verlaufsfarben
Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Ergebnis

CSS-Deklaration
background-color: #675BF0; background-image: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%);
Nur der Verlauf (für background-image)
linear-gradient(90deg, #3B82F6 0%, #9333EA 100%)
Ersatzfarbe (background-color)
#675BF0
Farbstopps mit berechneten Positionen
Nr.FarbePosition angegebenPosition verwendet
1#3B82F60 %0 %
2#9333EA100 %100 %

So wird gerechnet

Drei Arten von Verläufen

FunktionVerlaufStandard (weggelassen)
linear-gradient()entlang einer Geraden im gewählten Winkel180deg = von oben nach unten
radial-gradient()von der Mitte nach außenEllipse, Mitte, bis zur entferntesten Ecke
conic-gradient()im Kreis um die Mitte, wie ein Tortendiagrammab 0deg (oben), im Uhrzeigersinn

Beim linearen Verlauf zeigt der Winkel die Richtung: 0deg nach oben, 90deg nach rechts, 180deg nach unten. Mit „Wiederholen“ entsteht repeating-linear-gradient() usw.: Das Muster zwischen erstem und letztem Stopp wiederholt sich – ideal für Streifen.

CSS-Farbverlauf erstellen – so geht's

  1. Die Art wählen: linear, radial oder konisch – dazu Richtung, Startwinkel oder Form.
  2. Farbstopps mit Farbwähler und Regler setzen, weitere mit „+ Farbstopp“ ergänzen; „Wiederholen“ erzeugt Streifenmuster.
  3. Die CSS-Deklaration mit Ersatzfarbe kopieren oder nur den Verlauf für background-image übernehmen.

Farbstopps und fehlende Positionen

Positionen dürfen fehlen. Dann gilt nach der W3C-Spezifikation (CSS Images, „Coloring the Gradient Line“): Der erste Stopp liegt bei 0 %, der letzte bei 100 %, Stopps ohne Angabe dazwischen werden gleichmäßig verteilt. Ist eine Position kleiner als eine vorige, wird sie auf diese angehoben – so entstehen harte Kanten. Zwei Positionen hintereinander (red 0% 50%) erzeugen eine einfarbige Fläche. Die Tabelle zeigt, welche Position der Browser jeweils verwendet.

Warum eine Ersatzfarbe?

Verläufe sind Bilder. Wird das Bild nicht gezeichnet – etwa im Hochkontrastmodus oder bei einem Tippfehler im Wert –, bleibt nur background-color. Der Generator nimmt dafür den nach Fläche gewichteten Mittelwert der Farben.

Beispiel linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): Beide Farben decken je die Hälfte ab. Rot (59 + 147) ÷ 2 = 103, Grün (130 + 51) ÷ 2 = 90,5 ≈ 91, Blau (246 + 234) ÷ 2 = 240 – Ersatzfarbe #675BF0. Prüfen Sie den Kontrast Ihres Textes zu dieser Farbe und zu den hellsten und dunkelsten Stellen des Verlaufs.

Farben für den Verlauf finden Sie mit dem Farbpalette-Generator, Umrechnungen zwischen HEX und RGB erledigt der Farbumrechner, und passende Schatten baut der CSS Box-Shadow-Generator.

Häufige Fragen

Wie mache ich einen Farbverlauf in CSS?

Mit background-image: linear-gradient(90deg, #3B82F6, #9333EA); – oder kurz über background. Davor gehört eine background-color als Ersatz. Der Generator liefert beide Zeilen fertig zum Kopieren.

Wie bekomme ich harte Kanten statt weicher Übergänge?

Geben Sie zwei Stopps dieselbe Position, z. B. red 50%, blue 50%, oder einer Farbe zwei Positionen: red 0% 50%, blue 50% 100%. Mit „Wiederholen“ werden daraus Streifen.

Funktioniert conic-gradient in allen Browsern?

In allen aktuellen Browsern ja (Chrome und Edge seit Version 69, Firefox seit 83, Safari seit 12.1). Für sehr alte Browser sorgt die Ersatzfarbe dafür, dass die Fläche nicht leer bleibt.

Kann ich transparente Farben verwenden?

Ja. Geben Sie einen Stopp als rgba() oder 8-stelligen HEX-Wert ein, z. B. rgba(0, 0, 0, 0.5). Die Vorschau zeigt Transparenz auf einem Schachbrettmuster. Die Ersatzfarbe ist immer deckend.

Wie ändere ich die Richtung eines linearen Verlaufs?

Über den Winkel: 0deg läuft nach oben, 90deg nach rechts, 180deg (Standard) nach unten. linear-gradient(90deg, …) entspricht linear-gradient(to right, …).

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge