CSS-Verlaufsgenerator
CSS-Verläufe mit Live-Vorschau erstellen.
Presets:
background: linear-gradient(135deg, #D94F30, #0D7C66);Was ist ein CSS-Verlauf?
Ein CSS-Verlauf ist ein fließender Übergang zwischen zwei oder mehr Farben, der als Hintergrund auf HTML-Elemente angewendet wird. Er ist eine der vielseitigsten Eigenschaften des modernen Webdesigns und ermöglicht attraktive und professionelle Hintergründe ohne Bilder. Verläufe reduzieren das Seitengewicht durch den Wegfall von Grafikdateien, verbessern die Ladezeiten und passen sich perfekt an jede Bildschirmauflösung an, einschließlich Retina- und hochauflösender Displays.
Es gibt zwei Haupttypen von CSS-Verläufen: linear und radial. Lineare Verläufe erzeugen einen Farbübergang entlang einer geraden Linie, definiert durch einen Winkel (z.B. von oben nach unten, diagonal oder in jeder benutzerdefinierten Richtung). Radiale Verläufe hingegen strahlen von einem Mittelpunkt nach außen in kreisförmiger oder elliptischer Form aus und erzeugen Beleuchtungs- und Tiefeneffekte, die in modernen Benutzeroberflächen häufig verwendet werden.
CSS-Verläufe sind mit allen modernen Browsern kompatibel, einschließlich Chrome, Firefox, Safari, Edge und Opera. Unser Verlaufsgenerator ermöglicht Ihnen das Experimentieren mit Farben, Winkeln und Typen in Echtzeit und generiert automatisch den CSS-Code, bereit zum Kopieren und Einfügen in Ihr Webprojekt.
Häufig gestellte Fragen
Funktioniert es in allen Browsern?
Ja. CSS-Verläufe sind mit allen modernen Browsern kompatibel, ohne Vendor-Präfixe zu benötigen. Chrome, Firefox, Safari, Edge und Opera unterstützen sie nativ. Nur sehr alte Browser wie Internet Explorer 9 oder niedriger unterstützen sie nicht.
Kann ich mehr als 2 Farben verwenden?
Ja, CSS erlaubt Verläufe mit mehreren Farbstopps. Obwohl unser Generator mit 2 Farben arbeitet, um die Oberfläche zu vereinfachen, können Sie den resultierenden Code manuell bearbeiten, um weitere Farben hinzuzufügen, indem Sie sie durch Kommas in der Verlaufsdeklaration trennen.
Wie verwende ich den generierten Code?
Kopieren Sie einfach den CSS-Code, indem Sie auf die Schaltfläche 'Kopieren' klicken, und fügen Sie ihn in die Style-Eigenschaft des gewünschten HTML-Elements ein. Sie können ihn in einem CSS-Stylesheet, in einem Inline-Style-Attribut oder in Frameworks wie Tailwind CSS oder styled-components verwenden.
Mehr erfahren? Lesen Sie unseren vollständigen Leitfaden →