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

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

Для начала давайте не будем усложнять и возьмем простой блок фиксированного размера без содержимого. И добавим ему с помощью класса простой радиальный градиент от белого к темно-синему:

div#gradient-example {
        width: 100px;
        height: 250px;
        border: 2px solid #000;
        background-image: radial-gradient(#dbdbdb, #00002b);
}

Как видите, градиент распространяется к внутренним краям блока.

Давайте изменим размер градиента и зададим ему форму:

div#gradient-example {
        background-image: radial-gradient(circle closest-side, #dbdbdb, #00002b);
}

В этой ситуации градиент остановится на ближайшем внутреннем крае, заполняя оставшееся место конечным цветом.

Есть и другие возможности для задания размера и растягивания градиента, такие как: closest-corner (ближайший угол), farthest-side (дальняя сторона) и farthest-corner (дальний угол).

Наилучший способ понять градиенты — просто попробовать менять разные значения в демонстрации работы ниже:

Также можно использовать повторяющиеся радиальные градиенты, как показано в уроке «Создание фоновых изображений в стиле поп-арт с помощью CSS».

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание тени от приподнятого угла с использованием CSS
• Многослойные эффекты с использованием свойств CSS геометрии обрезки, фильтров и режимов наложения
• Создание улучшенных фонов с помощью режима наложения