CSS Gradients

Kurze Zusammenfassung aus: A Complete Guide to CSS Gradients

Linear Gradients

2 Farben, vertikal
background-image: linear-gradient(orange, red);

3 Farben, horizontal
background-image: linear-gradient(to right, orange, red, orange);

2 Farben, 45°, rot 60%
background-image: linear-gradient(45deg, red 60%, orange);

Radial Gradients

2 Farben
background-image: radial-gradient(orange, red);

2 Farben, Kreismittelpunkt link unten
background-image: radial-gradient(circle at bottom left, orange 60%, red);

3 Farben, Kreismittelpunkt rechts oben
background-image: radial-gradient(circle at top right, orange, red, #f60dd5);

Conic Gradients

2 Farben
background-image: conic-gradient(hsl(0, 100%, 50%), hsl(0, 100%, 40%));

2 Farben, spez. Winkel
background-image: conic-gradient(from -50deg, hsl(0, 100%, 50%), hsl(0, 100%, 20%) );

7 Farben
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

Repeating Gradients

2 Farben linear
background-image: repeating-linear-gradient( 45deg, #ff8a00, #ff8a00 10px, #e52e71 10px, #e52e71 20px );

2 Farben kreisförmig
background-image: repeating-radial-gradient( circle at 0 0, #ff8a00, #ff8a00 10px, #e52e71 10px, #e52e71 20px );