Verlauf-Generator
Farbstopps setzen, Winkel drehen, Code mitnehmen. Der Generator schreibt gültiges CSS für lineare und radiale Verläufe — ohne Präfix-Ballast.
Verlauf
Farbstopps
Zwei Stopps sind das Minimum, mehr als acht werden unübersichtlich.
CSS
Linear oder radial
linear-gradient() verläuft entlang einer Geraden; der Winkel gibt an, wohin der Verlauf zeigt — 0deg nach oben, 90deg nach rechts.radial-gradient() geht von einem Mittelpunkt nach außen und eignet sich für Lichtpunkte und weiche Hintergründe.
Bänder vermeiden
Bei großflächigen Verläufen zwischen ähnlichen Farben entstehen sichtbare Streifen. Was hilft: weniger Abstand zwischen den Farbstopps, ein zusätzlicher Zwischenstopp oder ein Verlauf über Farbton statt nur über Helligkeit. Ein leichter Buntheitsunterschied fällt dem Auge weniger als Kante auf als ein reiner Helligkeitssprung.
Text auf Verläufen
Ein Verlauf hat keinen einheitlichen Kontrastwert — an einem Ende kann Text bequem lesbar sein und am anderen durchfallen. Prüfe deshalb beide Enden einzeln imKontrast-Checker und richte dich nach dem schlechteren Wert.