CSS-Gradient-Generator
Bau einen CSS-Hintergrundverlauf ganz visuell: Farben wählen, ihre Positionen verschieben, den Winkel einstellen und das CSS für dein Stylesheet kopieren.
Keine Daten nötig
So geht's
- Wähle linear, radial oder konisch.
- Wähle die Farben und zieh ihre Positionen zurecht.
- Stelle den Winkel ein.
- Kopiere das CSS.
Wie es funktioniert
Das Tool schreibt die Standardfunktionen für CSS-Farbverläufe, die alle modernen Browser unterstützen: linear-gradient(Winkel, Farbe Position, …), radial-gradient(…) und conic-gradient(from Winkel, …). Die Farbstopps werden nach Position sortiert, damit die Ausgabe immer gültig ist.
Damit Text auf einem Verlauf lesbar bleibt, prüfe den Kontrast deiner Textfarbe gegen die hellste und die dunkelste Stelle.
Beispiele
- Hintergrund einer Hero-Sektion
- linear-gradient(135deg, #0d6e63 0%, #3cc3b0 55%, #f5d76e 100%)
Typische Anwendungsfälle
- Hero-Bereiche und Buttons
- Hintergründe und Karten
- Farbideen schnell ausprobieren
Datenschutz und Sicherheit
Dieses Tool benötigt weder persönliche Daten noch Dateien. Die Ergebnisse entstehen auf deinem Gerät. Wie jedes Tool mit Dateien umgeht
Häufige Fragen
Brauche ich Hersteller-Präfixe?
Nein. Farbverläufe ohne Präfix werden seit Jahren von allen großen Browsern unterstützt.
Kann ich Transparenz nutzen?
Ja – bearbeite das CSS nach dem Kopieren und nutze rgba() oder HEX-Farben mit acht Stellen.
Zuletzt aktualisiert: