Gradients

Linear Gradient:

Diagonal gradient with multiple color stops:background: linear-gradient(225deg, red, green 20%, yellow 70%, black)

Angeled gradient with just color stops:

background: linear-gradient( 105deg,  black 20%,  magenta 80%)

Radial Gradient:
General Gradient:

background: radial-gradient( 60px 45px,  circle  closest-side,  red,  blue  60%,  green)

Circular gradient ending at the closest corner:

background: radial-gradient( 60% 55%,  circle  closest-corner,  red,  green 20%,  yellow 70%,  black)

Elliptical gradient ending at the farthest side

background: radial-gradient( 20px 40px,  farthest-side,  white 20%,  magenta)

Note: Since the default value (respectively the default shape) for a radial gradient is an ellipse it doesn’t have to be specified.

Repeating Radial Gradient:

Smooth gradient repeated two times:

background: repeating-radial-gradient( closest-side,  red,  green 20%,  blue 50%) 

Note: Since the default starting point for a radial gradient is at the center of the gradient box it doesn’t have to be specified. The same goes for the shape. Based on the centered staring point it is a circle.

Sharp transitioning gradient repeated indefinitely:

background: repeating-radial-gradient( 30% 40%,  red,  red 11px,  black 11px,  black 22px)