Gradient może składać się z 2, lub więcej kolorów Rozróżniamy dwa rodzaje gradientów:

1. linear-gradient (rozchodzi się w górę, doł, lewo lub prawo)
   • w górę: linear-gradient(red , yellow) - domyślnie;
   • w dół: linear-gradient(to bottom, red , yellow);
   • w prawo: linear-gradient(to right, red , yellow);
   • w lewo: linear-gradient(to left, red , yellow);
2. radial-gradient (rozchodzi się od środka)

Kolory w gradiencie mogą się powtarzać: background: repeating-linear-gradient(red, yellow 10%, green 20%);