CSS-Farbverlauf-Generator
Wählen Sie linear, radial oder konisch und fügen Sie beliebig viele Farbstopps hinzu. Ziehen Sie die Griffe, um Stopps auf der Verlaufsleiste neu zu positionieren, kopieren Sie das CSS oder laden Sie ihn als SVG herunter.
So verwenden Sie diesen farbverlauf-generator
- Wählen Sie einen Verlaufstyp: Linear, Radial oder Konisch.
- Justieren Sie Winkel (linear), Form & Position (radial) oder Startwinkel (konisch).
- Ziehen Sie die runden Griffe auf der Verlaufsleiste, um jeden Farbstopp neu zu positionieren, oder bearbeiten Sie Farbe/Prozent direkt.
- Stopps frei hinzufügen oder entfernen. Kopieren Sie das CSS oder laden Sie als SVG herunter.
Häufig gestellte Fragen
Was ist der Unterschied zwischen linear, radial und konisch?
Linear läuft in einer Richtung (per Winkel). Radial strahlt von einem Punkt nach außen (Kreis oder Ellipse). Konisch dreht sich um einen Punkt wie ein Zeiger — ideal für Farbräder, Tortendiagramme und dekorative Schleifen.
Warum sieht mein konischer SVG-Verlauf anders aus?
SVG unterstützt konische Verläufe nicht nativ. Das heruntergeladene SVG bettet das CSS per foreignObject ein, das in Browsern funktioniert, aber nicht in allen SVG-Editoren. Für volle Editor-Unterstützung nutzen Sie linear oder radial.
Kann ich mehr als 2 Stopps hinzufügen?
Ja — es gibt kein Limit. Klicken Sie auf '+ Stopp hinzufügen' und der neue Stopp wird automatisch in der größten Lücke platziert.
Warum zeigt mein Verlauf sichtbares Banding in dunklen Bereichen?
Banding entsteht, wenn der Verlauf Farben schneller durchläuft, als 8 Bit pro Kanal rendern können — häufig in dunklen Blau- und Rottönen. Füge ein winziges Rausch-Overlay per CSS hinzu (1-2% Opazität), nutze einen größeren Farbunterschied zwischen Stopps oder wechsle zu OKLCH-Verläufen (CSS unterstützt `linear-gradient(in oklch, ...)` für glattere wahrnehmungsbasierte Übergänge).