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. 2–16 Farbstopps · Linear / Radial · Hinzufügen / Entfernen / Umkehren / Zufällig
- 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
Füge 2–16 Farbstopps hinzu. Die Positionen liegen zwischen 0% und 100% und dürfen nicht abnehmen; gleiche Positionen erzeugen eine harte Kante. Bearbeite, entferne, kehre um oder mische die Stopps und prüfe die Vorschau.
- 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
Aktuelles Ergebnis exportieren. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.