Page Title

Gradients Tutorial

-by me

It is possible to make Gradients with CSS:

This is an example how to make a linear gradient. Linear Gradients start at one side, and end at the other side. In this example, the gradient goes from up to down!

Please upvote if you learned something

#grad {
  background-image: linear-gradient(red, yellow);
}

This is an example how to make a linear gradient that goes to the right.

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions. The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow.

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

It is also possible to change the color of a gradient.

#grad {
  background-image: linear-gradient(to bottom right, blue, green);
}

The following example shows a linear gradient with multiple color stops:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Further reading:
W3Schools
Tutorails point
Mozilla