Zum Inhalt springen

CSS-Verlaufsgenerator

Erstelle einen linearen oder radialen Verlauf mit zwei bis vier Farbstopps.

Verlauf einstellen

Verarbeitung im Browser.

Ganze Zahl von 2 bis 4.

0–360 Grad; für lineare Verläufe.

0–100%; für radiale Verläufe.

0–100%; für radiale Verläufe.

Deckendes HEX mit 3 oder 6 Stellen.

0 ist transparent, 1 ist deckend.

0–100%; aufsteigend anordnen.

Deckendes HEX mit 3 oder 6 Stellen.

0 ist transparent, 1 ist deckend.

0–100%; aufsteigend anordnen.

Deckendes HEX mit 3 oder 6 Stellen.

0 ist transparent, 1 ist deckend.

0–100%; aufsteigend anordnen.

Deckendes HEX mit 3 oder 6 Stellen.

0 ist transparent, 1 ist deckend.

0–100%; aufsteigend anordnen.

Erzeugter Verlauf

Stelle den Verlauf ein und erzeuge anschließend das CSS.

CSS-Verlauf erstellen

Erzeuge einen nicht wiederholten Hintergrund aus ausdrücklich festgelegten Farbstopps.

  1. Linear oder Radial wählen.
  2. Zwei bis vier Stopps wählen.
  3. Farbe, Deckkraft und Position eingeben.
  4. Winkel oder Mittelpunkt einstellen.
  5. CSS erzeugen, Vorschau vergleichen und kopieren.

CSS-Syntax

linear-gradient folgt einer Geraden; 0deg zeigt nach oben. radial-gradient(circle at X% Y%) breitet sich vom Mittelpunkt aus.

Farbstopps

Positionen werden von 0 bis 100% aufsteigend eingegeben. Gleiche Nachbarpositionen erzeugen eine harte Kante. Transparenz wird als rgba ausgegeben.

Bestätigter Zustand

Eine Änderung löscht das alte Ergebnis, den Kopierstatus und die Vorschau. Erst erneutes Erzeugen wendet die aktuellen Werte an.

Grenzen

  • Keine Wiederholung, Ziehpunkte, Presets, Paletten oder Animation.
  • Textkontrast auf Verläufen muss separat geprüft werden.

Beispiele

linear-gradient(90deg, #FF0000 0%, #0000FF 100%).

radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%).

Häufige Fragen

Dürfen Positionen gleich sein?

Ja. Dadurch entsteht ein scharfer Übergang.

Warum keine Präfixe?

Ausgegeben wird die aktuelle standardisierte Syntax für moderne Browser.