CSS-Gradient-Generator: Aufgaben und Grenzen
Baut Farbverläufe per Regler: linear mit Winkel oder radial mit Form, zwei oder drei Stopps, Vorschau sofort und die fertige background-Zeile als Text.
Funktionsumfang
- Linear mit Winkel 0–360 Grad
- Radial als Kreis oder Ellipse
- Zwei bis drei Stopps mit Prozentpositionen
- Fertige CSS-Zeile zum Kopieren
Anleitung
- Typ wählen: linear oder radial
- Start-, End- und optional Mittelfarbe setzen
- Positionen und Winkel feinjustieren
- Die background-Regel kopieren
Grenzen und Voraussetzungen
Der mittlere Stopp lässt sich ab- und zuschalten – zwei Farben genügen oft. Für knallige Übergänge positionieren Sie die Stopps näher beieinander; für sanfte Verläufe weiter auseinander.
Wann es sich lohnt
- Hintergründe für Hero-Bereiche und Karten
- Schaltflächen und Badges aufwerten
- Platzhalter-Grafiken ohne Bilddatei
Nachgefragt
Warum sieht mein Verlauf auf anderen Bildschirmen anders aus?
Verläufe sind Bänder zwischen zwei Farben – Panels mit anderer Farbkalibrierung zeigen die Mitte anders. Das ist normal und kein Fehler im CSS.
Kann ich mehr als drei Farben nutzen?
Im Generator bewusst nicht – die CSS-Syntax nimmt beliebig viele Stopps, und mit dem kopierten Muster erweitern Sie die Liste selbst in Sekunden.
Was ist der Unterschied zu conic-gradient?
conic dreht Farbstreifen um einen Mittelpunkt – gut für Ringdiagramme. Linear und radial sind hier abgedeckt, weil sie den Löwenanteil der Praxis stellen.
Brauche ich für den Verlauf eine Bilddatei?
Nein. Ausgegeben wird eine background-Zeile, die der Browser selbst zeichnet – sie passt in jedes Stylesheet und bleibt bei jeder Bildschirmgröße scharf.
Weiterführende Werkzeuge
Diese Werkzeuge passen inhaltlich zu CSS-Gradient-Generator: