CSS-Verlaufsgenerator
Fügen Sie zwei oder mehr Farbstopps hinzu, um sofort CSS-Code für linear-gradient oder radial-gradient mit Live-Vorschau zu erzeugen. Passen Sie Winkel und Positionen frei an und kopieren Sie den Code mit einem Klick.
Tipps zur Nutzung
- Sie können bis zu 6 Farbstopps hinzufügen und Farbe sowie Position (%) jedes Stopps frei anpassen, um komplexe, mehrfarbige Verläufe zu erstellen.
- Bei einem linearen Verlauf zeigt 0 Grad von unten nach oben und 90 Grad von links nach rechts – der Schieberegler ermöglicht eine intuitive Anpassung.
- Radiale Verläufe kennen keinen Winkel: Die Farben breiten sich stattdessen kreisförmig vom Zentrum nach außen aus.
- Klicken Sie auf "CSS kopieren", um den generierten Code direkt in die Zwischenablage zu kopieren und ihn in Ihr Stylesheet einzufügen.
Häufig gestellte Fragen
Übrigens – warum CSS-Verläufe Verlaufsbilder abgelöst haben
Vor CSS3 wurden Verlaufshintergründe im Web meist als PNG- oder JPEG-Bilder erstellt, die in einem Bildbearbeitungsprogramm angefertigt wurden. Dieser Ansatz brachte reale Nachteile mit sich: zusätzliche Bildanfragen verlangsamten das Laden der Seite, beim Skalieren in responsiven Layouts wirkten die Bilder verschwommen, und schon die Änderung einer einzigen Farbe erforderte den erneuten Export des gesamten Bildes.
Als Browser in den frühen 2010er-Jahren die Syntax von linear-gradient und radial-gradient implementierten, verschwanden diese Probleme weitgehend. Da Verläufe vollständig als Text beschrieben werden, sind sie leichtgewichtig, bleiben bei jeder Größe scharf und lassen sich durch das Ändern weniger Werte im Stylesheet umfärben.
Frühe Implementierungen erforderten unterschiedliche Hersteller-Präfixe (-webkit-, -moz-, -o- usw.) und eine je nach Browser leicht abweichende Syntax, sodass Entwickler mehrere präfixierte Versionen derselben Regel schreiben mussten. Nachdem die Syntax vom W3C standardisiert wurde, funktioniert die präfixlose Version inzwischen einheitlich in allen gängigen Browsern.