Градиент

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

• background-image: linear-gradient(направление, цвет1, цвет2, ...) - определение линейного градиента;

Например:

• background-image: linear-gradient(to right, red, yellow); - слева направо, с указанием двух цветов;
• background-image: linear-gradient(to right, red 0%, yellow 50%, green 100%); - с указанием точек перехода;

Направления:

• to right - слева направо;
• to left - справа налево;
• to bottom - сверху вниз;
• to top - снизу вверх;
• 45deg - по диагонали под углом;

Например. Изменим файл index.html:

<div class="grad">Линейный градиент под углом -30°</div>

Изменим файл styles.css:

.grad {
    width: 300px;
    height: 150px;
    background-image: linear-gradient(-30deg, #9e63dd, #9c27b0 10%, #00e5a4);
    border: 1px solid #333;
}

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

• background-image: radial-gradient(форма размер, цвет1, цвет2, ...) - определение радиального градиента;

Формы:

• ellipse - эллиптический (по умолчанию);
• circle - круглый;
• closest-side - градиент до ближней стороны;
• farthest-corner - градиент до дальнего угла;

Например. Изменим файл index.html:

<div class="rad-grad">Радиальный градиент</div>

Изменим файл styles.css:

.rad-grad {
    width: 300px;
    height: 150px;
    background-image: radial-gradient(
        circle at center,
        #00e5a4,
        #3e63dd,
        #9c27b0
    );
    border: 1px solid #333;
}