Aufgabenpfad / von der Eingabe zum Ergebnis
So komponierst du einen CSS-Verlauf
- 01
Wähle den Verlaufstyp
Öffne Verlaufstyp und wähle Linear für einen geraden Übergang oder Radial für einen kreisförmigen. Das Vorschau-Badge zeigt den aktuellen Winkel, während du arbeitest.
- 02
Lege Richtung oder Fokus fest
Richtung / Fokus läuft von 0 bis 360. Bei einem linearen Verlauf ist es der Winkel in Grad; bei einem radialen platziert es den Fokuspunkt auf einem Ring um die Mitte. Das Badge verfolgt den Wert live, was kleine Korrekturen leicht beurteilbar macht.
- 03
Wähle Farben und Stopps
Lege Startfarbe und Endfarbe fest, dann positioniere Start-Stopp (0–99 %) und End-Stopp (1–100 %). Der Start muss vor dem Ende liegen, sonst springt der Status auf WERTE PRÜFEN.
- 04
Kontrolliere die Übergangszone
Der Abstand zwischen den beiden Stopps ist die Übergangszone: Stopps 1 % auseinander erzeugen eine nahezu harte Kante für zweifarbige Streifen, während Stopps bei 0 % und 100 % — die Standards — den weichsten Übergang über die volle Breite ergeben. Schau auf die Vorschau, nicht auf die Zahlen.
- 05
Kopiere die Deklaration
Drücke CSS kopieren oder .css herunterladen, um toolars-gradient.css zu speichern. Die Regel .gradient ist eine einzige background-Deklaration — linear-gradient(…deg, …) oder radial-gradient(circle at …, …) — exakt auf deine Stopps abgestimmt.
- 06
Wende sie an und erweitere sie
Die einzelne Deklaration kombiniert sich sauber mit deinen eigenen background-size- oder background-repeat-Ergänzungen. Brauchst du eine dritte Farbe? Kopiere die Regel und füge von Hand einen mittleren Stopp ein — die beiden Stopps, die du abgestimmt hast, verankern beide Enden des Übergangs. Als eine Zeile lässt sie sich auch sauber in eine Custom Property einfügen, wenn dein Designsystem Tokens so verwaltet.