radial-gradient()

Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента.

        
          
          .element {  background-image: radial-gradient(#6e4aff, #49A16C);}
          .element {
  background-image: radial-gradient(#6e4aff, #49A16C);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Градиент — это плавный переход между цветами. Радиальный градиент — это переход, который начинается в точке и расходится от неё подобно кругам на воде. Радиальный градиент не обязательно должен быть круговым. Форма по умолчанию — это эллипс, который заполняет всю площадь элемента.

Самый простой градиент задаётся двумя цветами.

        
          
          .element {  background-image: radial-gradient(#09ff00, red);}
          .element {
  background-image: radial-gradient(#09ff00, red);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
          
          .element {  background-image: radial-gradient(yellow, coral, blue, green, white, black);}
          .element {
  background-image: radial-gradient(yellow, coral, blue, green, white, black);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задаётся ключевым словом circle или ellipse (по умолчанию):

        
          
          .element {  background-image: radial-gradient(circle, #09ff00, red);}
          .element {
  background-image: radial-gradient(circle, #09ff00, red);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Вместо ключевых слов мы можем использовать точные значения: at 20% 50% или at 130px 500px.

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

• closest-side — градиент имеет такую форму, что заканчивается у ближайшей к центру границы элемента;
• farthest-side — градиент заканчивается у дальней от центра границы элемента;
• closest-corner — форма градиента подбирается таким образом, чтобы его край проходил через ближайший к центру угол;
• farthest-corner — край градиента будет проходить через дальний от центра угол.

Если градиент должен многократно повторяться от центра к краям, можно использовать функцию repeating-radial-gradient().

Множественный фон элемента может применяться и к градиентам.

На практике

Секция статьи "На практике"

Денис Ежков

Секция статьи "Денис Ежков"

🛠 Радиальным градиентам можно задавать резкие переходы между цветами. Совместно со свойством background-repeat можно генерировать различные паттерны:

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