radial-gradient()

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Функция 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 можно генерировать различные паттерны:

Открыть демо в новой вкладке

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

Открыть демо в новой вкладке