5 видов градиента

1. Линейный градиент

Линейный градиент можно указать через свойство background: linear-gradient().

.gradient {
  background: linear-gradient(red, green, blue);
}

Также можно указывать размер градиента:

.gradient {
    background: linear-gradient(red 10%, green 80%, blue);
}

2. Радиальный градиент

Радиальный градиент можно указать через свойство background: radial-gradient().

.radial-gradient {
  background: radial-gradient(red, green);
}

Примеры радиального градиента:

Также можно указать размер радиального градиента и отступы в первом параметре свойства background: radial-gradient().

.radial-gradient {
  background: radial-gradient(200px at 100% 10px, red, green, blue);
}

3. Горизонтальный градиент

Чтобы сделать направление градиента слева направо, надо в начале указать параметр to right.

.gorizontal-gradient {
  background: linear-gradient(90deg, red, blue); /* 1-ый способ */
  background: linear-gradient(to right, red, blue); /* 2-ой способ */
}

4. Повторяющийся градиент

Повторяющийся градиент можно сделать через свойство repeating-linear-gradient().

.radial-gradient {
  background-image: repeating-linear-gradient(-45deg, lightgreen 0, lightgreen 25px, green 25px, green 50px);
}

5. Повторяющийся радиальный градиент

Через свойство repeating-radial-gradient можно установить повторяющийся радиальный градиент:

.radial-gradient {
  background-image: repeating-radial-gradient(circle at center, #ffffff 0, #ffffff 10px, #5fe340 10px, #5fe340 20px);
}