CSS Gradient Generator
Farben und Winkel wählen, Vorschau ansehen und den fertigen CSS-Code mit einem Klick kopieren.
background: linear-gradient(90deg, #00aeef 0%, #7c3aed 100%);
So entsteht ein Farbverlauf in CSS
Ein linearer Verlauf wird mit linear-gradient(Winkel, Farbe1, Farbe2) beschrieben. 90 Grad läuft von links nach rechts, 180 Grad von oben nach unten. Ein radialer Verlauf mit radial-gradient(circle, Farbe1, Farbe2) startet in der Mitte und breitet sich kreisförmig aus.
Der erzeugte Code wird als background-Eigenschaft ausgegeben und lässt sich direkt in ein Stylesheet oder in ein style-Attribut einfügen. Alle gängigen Browser unterstützen Verläufe ohne Präfix.
- Für sanfte Übergänge helle und dunkle Töne derselben Farbfamilie mischen.
- Auf Texten über Verläufen den Kontrast prüfen.
- Zwei Farben mit großem Helligkeitsunterschied wirken am stärksten.
Fragen und Antworten
Was ist der Unterschied zwischen linear und radial?
Linear verläuft entlang einer Geraden im gewählten Winkel, radial geht von einem Mittelpunkt in alle Richtungen.
Brauche ich Herstellerpräfixe wie -webkit-?
Nein, linear-gradient und radial-gradient laufen in allen aktuellen Browsern ohne Präfix.
Kostet das Tool etwas?
Nein. Das Tool ist kostenlos und braucht weder Anmeldung noch Installation. Es gibt keine feste Grenze für die Länge der Eingabe, die Grenze setzt nur der Arbeitsspeicher deines Geräts.