CSS-Verlauf mit mehreren Farbstopps erstellen
Erstellen Sie einen CSS-Verlauf mit beliebig vielen Farbstopps, einem Typ (linear oder radial) und einstellbarem Winkel – mit Live-Vorschau. Der Code wird vollständig in Ihrem Browser berechnet und angezeigt.
So funktioniert es
Ab mehr als zwei Farben wird ein CSS-Verlauf optisch deutlich reizvoller: Drei oder mehr Stopps ermöglichen Übergänge wie bei einem Sonnenuntergang, holografische Effekte oder moderne Hintergründe für Landingpages. Mit diesem Tool können Sie jeden Farbstopp frei hinzufügen, positionieren (in Prozent) und entfernen – mit einer in Echtzeit aktualisierten Vorschau und dem exakten CSS-Code zum Kopieren.
Was ist der Unterschied zwischen linearem und radialem Verlauf?
Der lineare Verlauf (linear-gradient) verläuft geradlinig in einem festgelegten Winkel, während der radiale Verlauf (radial-gradient) von einem zentralen Punkt ausgeht und sich kreisförmig nach außen ausbreitet – ein Effekt, der oft für Lichthöfe oder kreisförmige Abschnittshintergründe verwendet wird.
Wofür steht die Position eines Farbstopps?
Die Position (in Prozent) gibt an, an welcher Stelle des Verlaufs die Farbe ihre volle Intensität erreicht, bevor sie in den nächsten Stopp übergeht. Liegen zwei Stopps nah beieinander, entsteht ein schärferer Übergang zwischen ihren Farben; sind sie weiter auseinander, ergibt sich ein sanfterer Verlauf.
100% lokale Verarbeitung: Verlauf und Code werden direkt in Ihrem Browser erstellt, ohne dass Daten gesendet werden.