Чтобы создать градиент с помощью CSS, вы можете использовать свойство background-image. В CSS3 были добавлены два типа градиента: линейный и радиальный. Оба типа градиента определяются с помощью функции linear-gradient() или radial-gradient() соответственно.

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

Линейный градиент создает плавный переход цвета вдоль линии. Его можно определить с помощью функции linear-gradient() и двух или более значений цвета.

.gradient {
  background-image: linear-gradient(to bottom, #ff0000, #00ff00);
}

В приведенном выше примере градиент идет от красного (#ff0000) сверху до зеленого (#00ff00) внизу.

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

Радиальный градиент создает плавный переход цвета вокруг центральной точки. Его можно определить с помощью функции radial-gradient() и двух или более значений цвета.

.gradient {
  background-image: radial-gradient(circle, #ff0000, #00ff00);
}

В приведенном выше примере градиент идет от красного (#ff0000) в центре до зеленого (#00ff00) на краях.

Дополнительные параметры градиента

Вы также можете добавить дополнительные параметры для градиента, такие как цвет остановки и направление. Например:

.gradient {
  background-image: linear-gradient(to bottom left, #ff0000, #00ff00 50%, #0000ff);
}

В этом примере градиент идет от красного (#ff0000) с правого верхнего угла до синего (#0000ff) в нижнем левом углу. Также добавлены две цвета остановки, #00ff00 на 50% и #0000ff на конце. Это означает, что градиент будет менять цвет от красного до зеленого, потом до синего.