Радиальный градиент

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

Радиальный градиентЛинейный градиент
аб

Рис. 1. Радиальный и линейный градиент

Радиальный градиент создаётся с помощью свойства background или background-image с функцией radial-gradient(). В простейшем случае для задания радиального градиента понадобится всего два параметра: начальный и конечный цвет. По умолчанию, начальная точка располагается при этом в центре. В примере 1 показано создание некоторого подобия шарика, для этого используется радиальный градиент и свойство border-radius.

Пример 1. Градиент

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Градиент</title> <style> div { height: 100px; width: 100px; /* Размеры */ border-radius: 50%; /* Превращаем в круг */ background: radial-gradient(#55ddff, #0081b5); } </style> </head> <body> <div></div> </body> </html>

Результат данного примера показан на рис. 1.

Радиальный градиент

Рис. 2. Радиальный градиент

Начальную точку градиента можно задавать в любом месте элемента, для этого вначале указывается её позиция.

Синтаксис radial-gradient

Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.

  • at top left = at left top = at 0% 0% (в левом верхнем углу);
  • at top = at top center = at center top = at 50% 0% (по центру вверху);
  • at right top = at top right = at 100% 0% (в правом верхнем углу);
  • at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
  • at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;
  • at right = at right center = at center right = at 100% 50% (по правому краю и по центру);
  • at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
  • at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
  • at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).

Если задать позицию начальной точки для примера 1 как at 40px 45px, а второй цвет сделать несколько темнее (#0076a5), то получится чуть более реалистичный шарик (рис. 3).

Изменение начальной точки градиента

Рис. 3. Изменение начальной точки градиента

Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.

Синтаксис radial-gradient

Разница между круговым и эллиптическим градиентом для цветов #f9e497 и #ffb60f продемонстрирована на рис. 4.

круговой градиент (значение circle)

а. круговой градиент (значение circle)

эллиптический градиент (значение ellipse)

б. эллиптический градиент (значение ellipse)

Рис. 4. Разные виды градиента

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

В примере 2 показано создание кругового градиента с заданной начальной точкой. Для усиления контрастности между цветами используется три значения цвета, а не два.

Пример 2. Круговой градиент

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Градиент</title> <style> div { background: radial-gradient(circle at 80px 40px, #f9eec7, #ffb60f, #ffb60f); padding: 20px; } </style> </head> <body> <div>Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет. </div> </body> </html>

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

Круговой градиент

Рис. 5. Круговой градиент

Наряду с типом градиента можно задавать и его размер, который зависит от применяемых ключевых слов. Размер пишется через пробел после типа градиента (circle или ellipse).

Синтаксис radial-gradient

В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.

Табл. 1. Ключевые слова для изменения размера градиента
ЗначениеКодОписаниеВид
closest-side

background: radial-gradient(circle closest-side at 30px 20px, #fff, #000);

background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000);

Форма градиента совпадает с ближайшей к нему стороной блока.
closest-corner

background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000);

background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000);

Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
farthest-side

background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000);

background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000);

Градиент распространяется до дальней стороны блока.
farthest-corner

background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000);

background: radial-gradient(ellipse farthest-corner at 30px 20px, #fff, #000);

Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

Для центральной начальной точки градиенты вроде closest-corner и farthest-side совпадают. Но градиенты будут различаться, если установить начальную точку в углу. В примере 3 используется значение closest-corner с заданием начальной точки в пикселях.

Пример 3. Размер градиента

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Градиент</title> <style> div { background: radial-gradient(circle closest-corner at 40px 30px, #fff, #009ec3); padding: 20px; } </style> </head> <body> <div>Содержимое</div> </body> </html>

Результат данного примера показан на рис. 6.

Использование значения closest-corner

Рис. 6. Использование значения closest-corner

Подобно линейному градиенту можно указывать несколько цветов, устанавливать их позицию и делать резкие переходы между цветами. Для этого произвольное количество цветов перечисляется через запятую, а после значения цвета через пробел идёт его позиция, которая может быть задана в пикселях или процентах. Крайние значения 0% и 100% можно не писать, они подразумеваются автоматически.

Позиция цветов

Резкие переходы получаются, когда позиция одного цвета совпадает с позицией другого, как показано в примере 4. Разница в один процент сделана, чтобы немного сгладить переход, иначе получается «лесенка» из пикселей, что смотрится не очень красиво.

Пример 4. Резкие переходы

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Градиент</title> <style> .french { width: 200px; height: 200px; /* Размеры */ border-radius: 50%; /* Превращаем в круг */ margin: auto; /* Выравниваем по центру */ background: radial-gradient(circle at center, #000e5e 24%, #fff 25%, #fff 50%, #c70102 51%, #c70102); } </style> </head> <body> <div class="french"></div> </body> </html>

Результат данного примера показан на рис. 7.

Резкие переходы между разными цветами

Рис. 7. Резкие переходы между разными цветами

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты