Radial-gradient(): радиальный градиент

CSS не ограничивается линейными градиентами. В вашем распоряжении есть и радиальный градиент, который устанавливается соответствующей функцией radial-gradient().

Поскольку о синтаксисе градиентных функций мы уже достаточно рассказали в предыдущих уроках, то сейчас нам уже нет необходимости на нем задерживаться — параметры здесь аналогичны radial-gradient(), вы меняете только имя функции.

background-image: radial-gradient(#5b4ffc, #df02cd);

Позиционирование

Начальная точка вектора радиального градиента находится в центре эллиптической формы (который в свою очередь по умолчанию размещается в центре стилизуемого элемента), откуда градиент расходится кругами. Центр можно смещать, пользуясь теми же значениями, которые принимает background-position. Перед указанием позиции следует использовать приставку at:

background-image: radial-gradient(at top left, #5b4ffc, #df0253);

Форма и радиус

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

• ellipse — градиент эллиптической формы (значение по умолчанию);
• circle — градиент круглой формы.

background-image: radial-gradient(circle, #5b4ffc, #df0253);

Значение радиуса может быть указано в любых доступных единицах CSS. Если указать одно значение, то оно будет принято за радиус круга. Два значения интерпретируются как радиус эллипса по оси X и радиус по оси Y. По умолчанию радиальным градиентом полностью заполняется фон элемента.

background-image: radial-gradient(ellipse 180px 90px, #a09af1, #000038);

Размер

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

• closest-side — создается градиент, который расходится только до ближайшей стороны элемента:

    background-image: radial-gradient(circle closest-side at 75% 40%, #ffee0e, #2e0a9f);
    

  
  

• closest-corner — градиент расходится только до ближайшего угла элемента:

    background-image: radial-gradient(circle closest-corner at 75% 40%, #ffee0e, #2e0a9f);
    

  
  

• farthest-side — противоположно closest-side, градиент расходится до самой дальней стороны элемента:

    background-image: radial-gradient(circle farthest-side at 75% 40%, #ffee0e, #2e0a9f);
    

  
  

• farthest-corner — противоположно closest-corner, градиент расходится до самого дальнего угла элемента:

    background-image: radial-gradient(circle farthest-corner at 75% 40%, #ffee0e, #2e0a9f);
    

  
  

Опорные точки

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

background-image: radial-gradient(#144bf1 30%, #3ee9ca 60%, #0a38e5);

Поддержка браузерами

По аналогии с linear-gradient(), если вы собираетесь внедрять функцию radial-gradient() в свой проект, стоит дополнить код CSS объявлениями с упоминанием вендорных префиксов, а также указать резервный цветовой фон для старых браузеров IE.

Далее в учебнике: repeating-radial-gradient() — повторяющийся радиальный градиент.