Wofür CSS-Gradient-Generator gedacht ist
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.
Bedienung
- Typ wählen: linear oder radial
- Start-, End- und optional Mittelfarbe setzen
- Positionen und Winkel feinjustieren
- Die background-Regel kopieren
Typische Anwendungen: Hintergründe für Hero-Bereiche und Karten, Schaltflächen und Badges aufwerten, Platzhalter-Grafiken ohne Bilddatei.
Fragen und Antworten
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.
Einschränkungen
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.
Was das Werkzeug kann
Linear mit Winkel 0–360 Grad, Radial als Kreis oder Ellipse, Zwei bis drei Stopps mit Prozentpositionen, Fertige CSS-Zeile zum Kopieren
Passende Helfer rund um CSS-Gradient-Generator: