CSS-Gradient-Generator Erstellen Sie schöne lineare, radiale und konische CSS-Gradients mit mehreren Farbstopps und Winkelkontrolle.

CSS-Gradienten werden mithilfe der Eigenschaft background oder background-image definiert. Lineare Gradienten verwenden die Funktion linear-gradient() mit einer Richtung (Winkel in Grad oder Schlüsselwörtern wie nach rechts) gefolgt von Farbstopps. Jeder Farbstopp besteht aus einem Farbwert und einem optionalen Positionsprozentsatz. Radiale Gradienten verwenden radial-gradient() mit einer Form (Kreis oder Ellipse) und Größenschlüsselwörtern. Konische Gradienten verwenden conic-gradient() für sweeping-Farbübergänge. Mehrere Farbstopps erzeugen komplexe Übergänge - Sie können zwei Stopps an der gleichen Position für harte Farbgrenzen verwenden. Für die Leistung werden CSS-Gradienten vom Browser gerendert und benötigen keine Bildherunterladungen. Sie sind auflösungsunabhängig und sehen auf jeder Anzeichendichte scharf aus. Verwenden Sie das -webkit-Präfix für ältere Browserunterstützung, obwohl moderne Browser Gradienten ohne Präfixe unterstützen. Gradienten können mithilfe mehrerer background-Werte, die durch Kommas getrennt sind, geschichtet werden, was komplexe visuelle Effekte ermöglicht. Die Eigenschaft background-size steuert die Größe jedes Gradientenschichts bei der Erstellung von wiederholenden Mustern.