Как сделать градиент html

Узнайте, как создать градиентный фон в HTML с примером кода и настройками стиля.

Градиент в HTML можно создать с помощью тега <linear-gradient> или <radial-gradient>. Пример линейного градиента для задания цвета конкретному элементу:

.element {
    background: linear-gradient(to right, #ffa500, #f00);
}

Здесь первый цвет - это оранжевый (#ffa500), а второй - красный (#f00). Здесь также указывается направление для градиента - в данном случае "право" (to right).

Другие варианты задания градиента

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

.element {
    background: linear-gradient(to right, #ffa500 0%, #f00 25%, #000 50%, #f00 75%, #ffa500 100%);
}

Здесь мы задали пять точек пересечения с помощью процентов - 0%, 25%, 50%, 75% и 100%. То есть первый цвет (#ffa500) будет действовать до 0%, потом плавно переходит в красный (#f00) и до 25%, потом в черный (#000) и до 50%, потом в красный (#f00) и до 75%, а последним идет опять оранжевый (#ffa500) и до 100%.

Также можно указать не просто два цвета, а несколько - для этого достаточно просто добавить новые параметры в запись:

.element {
    background: linear-gradient(to right, #ffa500 0%, #f00 25%, #000 50%, #f00 75%, #ffa500 100%);
}

Здесь мы задали пять цветов - оранжевый, красный, черный, красный и оранжевый, которые будут плавно переходить друг в друга в соответствии с заданным процентом.

Аналогичным образом можно задать и радиальный градиент. Пример задания радиального градиента:

.element {
    background: radial-gradient(circle, #ffa500, #f00);
}

Здесь мы задаем цвета оранжевого (#ffa500) и красного (#f00). Дополнительно указывается параметр "circle", который определяет форму градиента - в данном случае круглая.

Также можно задать более детально параметры радиального градиента, например, радиус градиента и точки пересечения:

.element {
    background: radial-gradient(circle, #ffa500 0%, #f00 25%, #000 50%, #f00 75%, #ffa500 100%);
}

Здесь мы задали такие же цвета, как и для линейного градиента, а также их точки пересечения в процентах.