Gradient Stops Rechner
Berechnet gleichmaessig verteilte Farbstopps für einen CSS-Verlauf.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der Gradient Stops Rechner?
Der Gradient Stops Rechner berechnet gleichmäßig verteilte Farbstopps für einen CSS-Verlauf. Wenn du mehrere Farben in einem linearen oder radialen Verlauf gleichmäßig anordnen willst, brauchst du die richtigen Prozentwerte. Das Tool nimmt dir das Rechnen ab und liefert die Positionen direkt.
Gib die Anzahl der Farben ein und das Tool berechnet die Stopp-Positionen in Prozent von 0 bis 100. Bei drei Farben sind das 0 %, 50 % und 100 %. Die Berechnung läuft direkt im Browser, es werden keine Daten gesendet. So baust du saubere, gleichmäßige CSS-Gradients ohne mühsames Ausrechnen der Abstände.
Beispiele
- Bei 2 Farben liegen die Stopps bei 0 % und 100 %.
- Bei 3 Farben ergeben sich 0 %, 50 % und 100 %.
- Bei 5 Farben verteilen sich die Stopps auf 0 %, 25 %, 50 %, 75 % und 100 %.
Häufige Fragen zum Gradient Stops Rechner
Wie nutze ich die Werte in CSS?
Du setzt sie in linear-gradient ein, etwa linear-gradient(90deg, red 0%, green 50%, blue 100%). Die Prozentwerte legen fest, wo jede Farbe ihren reinen Ton hat.
Muss ich die Prozentwerte überhaupt angeben?
Ohne Angaben verteilt CSS die Farben automatisch gleichmäßig. Explizite Stopps brauchst du, wenn du eine ungleichmäßige Verteilung oder harte Farbkanten möchtest.
Funktioniert das auch für radiale Verläufe?
Ja, die Prozentwerte gelten genauso für radial-gradient und conic-gradient. Sie geben dort die Position entlang des Radius bzw. Winkels an.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
