CSS radial-gradient()

[Serg_Brain]

Радиальный градиент radial-gradient()​

Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.

Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

Значение	Описание
closest-side	Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse.
farthest-side	Размер рассчитывается из расстояния до дальних сторон.
closest-corner	Размер рассчитывается из расстояния до ближних углов.
farthest-corner	Размер рассчитывается из расстояния до дальних углов.

Пример 1: Начинается от одного цвета, заканчивается другим.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:

<div class="rg-1"></div>

Код CSS:

.rg-1 {
    width: 600px;
    height: 200px;
    background-image: radial-gradient(circle farthest-corner at 100px 50px, #ebff00, #ff6200);
}

Пример 2: От центра к краям цвет становится темнее.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:

<div class="rg-2"></div>

Код CSS:

.rg-2 {
    width: 600px;
    height: 200px;
    background-image: radial-gradient(ellipse, #FBF2EB, #352A3B);
}

Пример 3: Придать тень мячу.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:

<div class="rg-3"></div>

Код CSS:

.rg-3 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 65% 15%, aqua, darkblue);
}