Bitte warten...

CSS: Farbverläufe

W3C Standard

Mit CSS 3 lassen sich verschiedene Farbverläufe realisieren. Aktuelle Versionen der Browser Mozilla Firefox, Google Chrome sowie Opera unterstützen diese Eigenschaft. Der Internet Explorer unterstützt die Eigenschaft erst ab Version 10.

Es empfiehlt sich, für Browser, die diese Eigenschaft nicht unterstützen, eine homogene Hintergrundfarbe anzugeben.

Lineare Farbverläufe – linear-gradient

Diese Eigenschaft erwartet nach dem Schlüsselwort linear-gradient eine Liste mit einer Richtungsangabe und den Farben des Farbverlaufs. Richtungsangaben können z. B. sein:

to top – Farbverlauf von unten nach oben
to bottom left – Farbverlauf von rechts oben nach links unten
45deg – Farbverlauf im Winkel von 45°

Die Position der einzelnen Farben kann in Pixeln oder Prozent angegeben werden.

Beispiele:

Hier der Code dazu:

Code kopieren
<div style='background-image:linear-gradient(to right, hsla(0,100%,50%,1) 0%, hsla(0,100%,50%,0) 100%);width:720px;height:100px;margin-bottom:16px;background-color:silver;'></div>
<div style='background-image:linear-gradient(to bottom, hsl(0,100%,50%) 0%, hsl(30,100%,55%) 20%, hsl(55,100%,55%) 40%, hsl(125,100%,45%) 60%, hsl(220,100%,55%) 80%, hsl(285,100%,55%) 100%);width:720px;height:100px;margin-bottom:16px;background-color:silver;'></div>
<div style='background-image:linear-gradient(45deg, hsla(0,0%,0%,0) 25%, hsl(0,100%,50%) 25%, hsl(30,100%,55%) 35%, hsl(55,100%,55%) 45%, hsl(125,100%,45%) 55%, hsl(220,100%,55%) 65%, hsl(285,100%,55%) 75%);width:720px;height:100px;margin-bottom:16px;background-color:silver;'></div>

Mit repeating-linear-gradient können sich regelmäßig wiederholende Farbverläufe realisiert werden:

Hier der Code dazu:

Code kopieren
<div style='background-image:repeating-linear-gradient(45deg, hsl(0,100%,50%) 25%, hsl(30,100%,55%) 35%);width:720px;height:100px;margin-bottom:16px;background-color:silver;'></div>

Radiale Farbverläufe – radial-gradient

In ähnlicher Weise können mit dem Schlüsselwort radial-gradient kreis- (circle) und ellipsenförmige (ellipse) radiale Farbverläufe erzeugt werden.

Beispiele:

Hier der Code dazu:

Code kopieren
<div style='background-image:radial-gradient(ellipse, hsl(0,85%,50%) 0%, hsl(55,85%,55%) 50%, hsl(125,85%,45%) 70%);width:720px;height:100px;margin-bottom:16px;'></div>
<div style='background-image:radial-gradient(circle at bottom, hsla(285,100%,55%,0) 3%, hsl(285,100%,55%) 5%,hsl(220,100%,55%) 10%, hsl(125,100%,45%) 15%, hsl(55,100%,55%) 20%, hsl(30,100%,55%) 25%, hsl(0,100%,50%) 30%, hsla(0,100%,50%,0) 33%);width:720px;height:150px;margin-bottom:16px;'></div>