CSS-Gradient-Generator

Anleitung

1. Typ wählen: Linear, radial oder kegelförmig auswählen
2. Farben hinzufügen: Farbstopps und deren Positionen hinzufügen und anpassen
3. Winkel setzen: Die Richtung des Verlaufs (oder die Form bei radial) anpassen
4. CSS kopieren: Den erzeugten Code in Ihr Stylesheet einfügen

Das große Vorschaufeld aktualisiert sich mit jeder Änderung, sodass das, was Sie sehen, genau das ist, was der kopierte Code erzeugt.

CSS-Verläufe verstehen

Ein Verlauf ist keine Bilddatei — er ist ein Wert, den der Browser über Funktionen wie linear-gradient(), radial-gradient() und conic-gradient() im Handumdrehen malt. Jede nimmt eine Richtung oder Form plus Farbstopps: Farben, die an Positionen entlang der Verlaufsachse gepinnt sind. Lineare Verläufe streichen entlang einer Linie in beliebigem Winkel, radiale strahlen von einem Zentrum als Kreis oder Ellipse aus, und kegelförmige rotieren um einen Punkt wie ein Farbrad, was sie ideal für Tortendiagramme macht. Weil Verläufe berechnet werden, skalieren sie auf jede Elementgröße ohne Unschärfe und wiegen netzwerktechnisch nichts. Ein Stolperstein: Die Interpolation zwischen entfernten Farbtönen kann im RGB-Raum durch schmutziges Grau laufen, also liefern benachbarte Farbtöne meist sauberere Ergebnisse.

Funktionen

• Lineare, radiale und kegelförmige Verläufe
• Unbegrenzte Farbstopps mit anpassbaren Positionen
• Anpassbarer Winkel und radiale Form (Kreis oder Ellipse)
• Live-Vorschau über die volle Breite
• Ein-Klick-Kopieren des erzeugten CSS
• Läuft vollständig in Ihrem Browser

Anwendungsfälle

Frontend-Entwickler bauen Hero-Hintergründe und Button-Hover-Zustände, ohne ein Design-Tool zu öffnen. Designer prototypisieren Farbübergänge, bevor sie sie einem Designsystem übergeben, und wer eine ältere Website pflegt, kann flache Farbblöcke durch dezente Verläufe ersetzen, die Tiefe hinzufügen, ohne neue Bildassets.

Verwandte Tools

• Color Picker
• CSS-Formatierer
• Color Palette Generator