В CSS3 имеются средства для заливки блочных элементов (например, <div> или <button>) градиентными цветами.
Это специальные значения linear-gradient() или radial-gradient() для параметров background или background-image.
Без этих специальных значений градиенты, как известно, создаются с помощью графического изображения (файла) с градиентными переходами цветов,
который указываетсря в качестве значения CSS-параметра background или background-image (например, background: url(файл)).
Вид градиента определяется значением (функцией) вида linear-gradient(параметы) или radial-gradient(параметы).
Параметры в круглых скобках определяют цвета (обязательно минимум два цвета — начальный и конечный, между которыми происходит плавный переход). Около цвета можно указать размеры области, которую данный "твёрдый" цвет должен занимать, не подвергаясь градиентному преобразованию.
Для линейного градиента можно указать его направление как угол в градусах (например, 60deg) или радианах ((например, 1.05rad)), либо одним или двумя ключевыми словами типа left, right, top, bottom, следующими за ключевым словом to (например, to left bottom).
Направление линейного градиента по умолчанию — сверху вниз (180 град. или to bottom). Угол отсчитывается от вертикальной оси по часовой стрелке.
Для радиального градиента можно указать тип градиента (ellipse — эллиптический, принимаемый по умолчанию, или circle — круговой) и позицию центра (at x y,
где x y — координаты в % , px или др. линейных единицах).
На данной странице приведены несколько простейших примеров линейных и радиальных градиентов. Обратите внимание на запятые в перечне параметров и единицы измерения.
Выбирая из приводимых на данной странице списков значение для градиента, вы можете проверить, как он работает в вашей версии браузера.