Farbverlauf mit CSS

Mit der CSS3 Eigenschaft gradient mit seinen Ausrichtungen (linear, radial) gibt es endlich die Möglichkeit, Farbverläufe bei der Umsetzung nicht mehr nur mittels Grafiken in die CSS-Dateien einbinden zu müssen.

Der Farbverlauf wird von allen aktuellen Browsern unterstützt. Ein Browser-Prefix (-ms-, -moz-, -webkit-) ist nicht nötig.

Beispiele

background: linear-gradient(#3DB7FF, #FF00E9);

background: linear-gradient(#FFFA00, #59FA00, #00FFFA);

Angabe der Farben

Farbnamen	`linear-gradient(Red, Blue);`
Hexadezimal	`linear-gradient(#FF1414, #0C0CFF);`
RGB	`linear-gradient(rgb(255,20,20), rgb(12,10,255));`
RGBA	`linear-gradient(rgba(255,20,20,1), rgba(12,10,255,1));`
HSL	`linear-gradient(hsl(54,91%,96%), hsl(53,87%,58%));`
HSLA	`linear-gradient(hsla(54,91%,96%,1), hsla(53,87%,58%,1));`

Die Richtung des Verlaufs ändern

background: linear-gradient(to right, #3DB7FF, #FF9A60);

Mögliche Werte sind:

`to left`	Nach Links
`to right`	Nach Rechts
`to top`	Nach Oben
`to bottom`	Nach Unten
`45deg`, `-20deg`	Grad

Ein Beispiel mit der Angabe 45deg das den Grad bestimmt.

background: linear-gradient(45deg, #FFF600, #A36BFF);

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

Farbverlauf begrenzen

An welcher Stelle der Verlauf beginnt, wird durch die %-Angabe festgelegt. Für einen sauberen Verlauf müssen die %-Angaben also von links nach rechts immer höhere Werte aufweisen.

background: linear-gradient(#FFFA00 25%, #3DB7FF 75%);

Farbverlauf wiederholen

background: repeating-linear-gradient(#FFFA00 25%, #3DB7FF 75%);

background: repeating-linear-gradient(-45deg, transparent, transparent 25px,
 rgba(0,0,0,1) 25px, rgba(255,255,255,1) 50px);

background: repeating-linear-gradient(45deg, Red, Red 5px, White 5px, White 10px);

Farbverlauf mit Hintergrundbild

background: url(bild.png) no-repeat center center, 
linear-gradient(#FFFFFF, #FFA3A3);

Radialer Farbverlauf

background: radial-gradient(circle, #3DB7FF 10%, #FFFFFF 84%);

Mögliche Werte sind:

circle,
ellipse closest-corner, closest-side, farthest-corner, farthest-side

Ein Beispiel mit der Angabe ellipse und farthest-corner

background: radial-gradient(ellipse farthest-corner, #FFFFFF 30%, #3DB7FF 70%);

Mit at top left, at top center, at top right, at center left, at center center, at center right, at bottom top left, at bottom center und at bottom right bestimmt man die Position.

background: radial-gradient(circle at top right, #3DB7FF 10%, #FFFFFF 84%);

background: radial-gradient(circle at 100%, #0078BF, #3DB7FF 50%, #eee 75%, #333 75%);

Radialer Farbverlauf wiederholen

background: repeating-radial-gradient(circle, #FF7FED 40%, #0026FF 50%);

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Mit der Anweisung: at 60% verschieben Sie den Verlauf von der Mitte.

background: radial-gradient(at 60% 40px, #FF0000, #FFFF00, #008000);

background: radial-gradient(circle at 60% bottom, #FF0000, #FFFF00, #008000);

background: url(bild.png) no-repeat center center, 
radial-gradient(circle closest-side, #FFFF00 25%, #FFA700 100%, transparent);

div#demo1 {
 width: 444px;
 height: 207px;
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 20px,
 rgba(0, 0, 0, 0.4) 20px, transparent 20px), url(bild.png);
}

background:repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%,
 rgba(221, 221, 221, 0.49) 10%),
repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%);

background: repeating-linear-gradient(-45deg, rgba(255, 0, 0, 0.2), 
rgba(255, 0, 0, 0.2) 5px, transparent 5px, transparent 10px), 
repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 5px,
 white 5px, white 10px);

Weitere Beispiele

background: repeating-linear-gradient(-10deg, rgba(220, 220, 220, 0.50),
 rgba(220, 220, 220, 0.50) 5px, transparent 5px, transparent 10px),repeating-linear-gradient(10deg,
 rgba(220, 220, 220, 0.50), rgba(220, 220, 220, 0.50) 5px, rgba(255, 255, 255, 0.50) 5px, rgba(255, 255, 255, 0.50) 10px);

background: repeating-linear-gradient(-45deg, rgba(255, 255, 0, 0.50),
 rgba(0, 255, 0, 0.50) 5px, transparent 5px, transparent 10px),repeating-linear-gradient(45deg,
 rgba(0, 0, 255, 0.50), rgba(255, 0, 0, 0.50) 5px, rgba(255, 255, 255, 0.50) 5px, rgba(255, 255, 255, 0.50) 10px);

Tipps

Animationen mit Keyframes

Transparenter Farbverlauf

Mit dem Ultimate CSS Gradient Generator von ColorZilla können Sie einen Farbverlauf erstellen.