Радиальный градиент. CSS: Радиальный градиент для фона Css радиальный градиент

CSS функции

Определение и применение

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

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

Более подробно о работе с градиентами вы можете ознакомиться в статьях « » и « ». Обращаю Ваше внимание, что в статьях освещены нюансы работы со старыми браузерами и приведены многочисленные примеры.

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

Функция			Opera		IExplorer	Edge
radial-gradient()	26.0 10.0 -webkit-	16.0 3.6 -moz-	12.1 11.1 -o-	6.1 5.1 -webkit-	10.0	12.0

CSS синтаксис:

background-image / background : radial-gradient ([форма keyword (или размер )] ат позиция x-axis y-axis , цвет 1 – остановка 1 , . . . , цвет n – остановка n );

Форма

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

Keyword

Градиент рассчитывается исходя из расстояния до ближайшей / дальней стороны , либо ближайшего / дальнего угла элемента.

Значение	Описание
closest-side	Градиент рассчитывается исходя из расстояния до ближайшей стороны элемента от её центра для круглых градиентов (ось x или ось y ) и до ближайших сторон (ось x и ось y ) если градиент в форме эллипса. background-image : radial-gradient(circle closest-side at 60% 60%, plum, black, orange) ; background-image : radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange) ;
closest-corner	Градиент растягивается таким образом, чтобы он проходил через ближайший к центру угол элемента (размер рассчитывается в зависимости от расстояния до ближайшего угла элемента). background-image: radial-gradient(circle closest-corner at 60% 50%, plum, black, orange) ; background-image: radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange) ;
farthest-side	Градиент рассчитывается исходя из расстояния до дальней стороны элемента от её центра для круглых градиентов (ось x или ось y ) и до ближайших сторон (ось x и ось y ) если градиент в форме эллипса. background-image: radial-gradient(circle farthest-side at 100% 50%, plum, black, orange) ; background-image: radial-gradient(ellipse farthest-side at 100% 50%, plum, black, orange) ;
farthest-corner	Градиент растягивается таким образом, чтобы он проходил через дальние от центра углы элемента (размер рассчитывается в зависимости от расстояния до дальнего угла элемента). Это значение по умолчанию. background-image: radial-gradient(circle farthest-corner at 60% 60%, plum, black, orange) ; background-image: radial-gradient(ellipse farthest-corner at 60% 60%, plum, black, orange) ;

Размер

Задает размер формы градиента. Значения circle или ellipse при этом указывать не надо, запрещено использовать ключевые слова если указан размер . Если указать одно значение , то оно будет расценено браузером как . Если указать два значения , то первое значение будет расценено браузером как горизонтальный радиус , а второе значение как вертикальный радиус для эллиптического элемента .

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

Позиция

Начальная позиция радиального градиента определяется ключевым словом – center , но может быть изменена с использованием единиц измерения длины (например: px или em ), процентными значениями и ключевыми словами , которые используются в CSS свойстве background-position , оно отвечает за положение (позицию) фонового изображения.

Значение	Описание
left top left center left bottom right top right center right bottom center top center center center bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет "center"
x% y%	0% 0% (это значение по умолчанию ). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Цвет

Допускается использовать не только «Предопределенные цвета », но и любые « » - шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A .

Остановка

Значения точек остановки (color stops ) задаются в единицах измерения длины (например – px или em ) и в процентных значениях . Точка остановки сообщает браузеру, что градиент по радиусу должен достичь заданного цвета к заданному значению и плавно перейти к следующему цвету, если он есть.

Пример использования

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

В данном примере мы создали четыре блока и задали для них радиальные градиенты. Верхние блоки имеют эллиптическую форму , а нижние блоки круглую форму .

Рассмотрим пример позиционирования радиального градиента.

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

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

Рассмотрим пример использования точек остановки радиального градиента:

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

• Первый и четвертый блок – двухцветный градиент красный цвет , который плавно переходит в зеленый , занимающий оставшую часть элемента.
• Второй и пятый блок – трехцветный градиент , в котором 10% от центра занимает красный цвет , который плавно переходит в зеленый , с точкой остановки 50% , он в свою очередь плавно переходит в синий , который занимает всю оставшуюся часть элемента.
• Третий и шестой блок – трехцветный градиент , в котором 50% от центра занимает красный цвет , который плавно переходит в зеленый , с точкой остановки 85% , он в свою очередь плавно переходит в синий , который занимает всю оставшуюся небольшую часть элемента.

Давайте рассмотрим, как управлять размером радиального градиента в CSS.

В этом примере мы создали три блока:

Первый блок – мы указали одно значение 50px , которое было расценено браузером как радиус для круглого градиента . Указали для градиента 7 цветов . Обратите внимание, что крайний цвет заполняет оставшуюся область.

Второй блок – мы указали два значения в процентах : первое значение - горизонтальный радиус , а второе значение - вертикальный радиус для эллиптического градиента. Указали для градиента 8 цветов . Обратите внимание, что крайний цвет мы указали белый, который и заполнил оставшуюся область (один из вариантов, чтобы оставить только форму градиента).

Третий блок – мы указали два значения в единицах измерения длины (px и em ): первое значение - горизонтальный радиус , а второе значение - вертикальный радиус для эллиптического элемента. Указали для градиента 7 цветов .

Градиентный фон

Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS определяет два типа градиентов:

• Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
• Радиальные градиенты (определяемые их центром)

CSS линейные градиенты

Для создания линейного градиента необходимо определить не менее двух цветовых ограничителей. Цветовые ограничители - это цвета, которые вы хотите сделать плавными переходами между ними. Можно также задать начальную точку и направление (или угол) вместе с эффектом градиента.

Синтаксис

background: linear-gradient(direction , color-stop1 , color-stop2, ... );

Линейный градиент-сверху вниз (по умолчанию)

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

Пример

#grad {
background: linear-gradient(red, yellow);
}

Линейный градиент-слева направо

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

Пример

#grad {
background: linear-gradient(to right, red , yellow);
}

Линейный градиент-Диагональ

Можно сделать градиент по диагонали, указав как горизонтальные, так и вертикальные начальные позиции.

В следующем примере показан линейный градиент, начинающийся в левом верхнем углу (и направляется в нижний правый угол). Оно начинает красно, переходя к желтому цвету:

Пример

#grad {
background: linear-gradient(to bottom right, red, yellow);
}

Использование углов

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

Синтаксис

background: linear-gradient(angle , color-stop1 , color-stop2 );

Угол указывается в виде угла между горизонтальной линией и линией градиента.

В следующем примере показано, как использовать углы на линейных градиентах:

Пример

#grad {
background: linear-gradient(-90deg, red, yellow);
}

Использование нескольких цветовых остановок

В следующем примере показан линейный градиент (сверху вниз) с несколькими остановками цвета:

Пример

#grad {
background: linear-gradient(red, yellow, green);
}

В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:

Градиентный фон

Пример

#grad {
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Note: Internet Explorer 9 and earlier versions do not support gradients.

"/> Просмотр демо в редакторе

Использование прозрачности

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

Чтобы добавить прозрачность, мы используем функцию RGBA () для определения ограничителей цвета. Последний параметр в функции RGBA () может быть значением от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).

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

Пример

#grad {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Повторение линейного градиента

Функция повторения-линейного градиента () используется для повторения линейных градиентов:

Пример

Повторяющийся линейный градиент:

#grad {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS радиальные градиенты

Радиальный градиент определяется его центром.

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

Синтаксис

background: radial-gradient(shape size at position, start-color, ..., last-color );

По умолчанию форма имеет эллипс, размер - самый дальний угол, а положение - центр.

Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)

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

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

Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:

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

Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:

Div { background-image: radial-gradient(cyan, indigo); width: 400px; height: 100px; } Попробовать »

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

Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(cyan, yellow, indigo, white); } #two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); } Попробовать »

Форму радиального градиента можно определить с помощью ключевых слов circle (круг) и ellipse (эллипс), указав одно из них в качестве первого аргумента:

Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(ellipse, cyan, indigo); } #two { background-image: radial-gradient(circle, cyan, indigo); } Попробовать »

По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:

Значение	Описание
left top left center left bottom right top right center right bottom center top center center center bottom	Если вы указываете только одно ключевое слово, второе будет "center".
x% y%	Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%.
x-pos y-pos	Первое значение это горизонтальная позиция, второе - вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения.

Позиционирование градиента указывается до значений цветовых оттенков, но после ключевого слова, определяющего форму градиента (если оно указано):

Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(at right, cyan, indigo); } #two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); } #three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); } Попробовать »

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

Ключевые слова	Описание
Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса).
Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента.
Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса).
Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса.

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

Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); } #two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); } #three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); } #four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan, #90EE90, rgba(172,160,160,0)); }

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

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

Градиент может часто пригодиться на любом сайте, поэтому в CSS3 было решено добавить функционал для создания таких градиентов. Различают линейный и радиальный градиенты . На рисунке выше, слева – линейный, справа – радиальный градиент. Если вдруг браузер не будет поддерживать градиент, то для этого в файле стилей выше строки задания градиента, следует указать простой фон для элемента.

Для создания линейного градиента существует значение linear-gradient , для радиального radial-gradient . Кроме того, существуют две функции для повтора градиента repeating-linear-gradient и repeating-radial-gradient . Отдельного свойства для добавления градиента не предусмотрено, он считается фоновым изображением, поэтому добавляется через свойства:

• background,
• background-image,
• border-image,
• list-style-image.

Рассмотрим примеры создания градиентов. Градиент создается при помощи соответствующей функции и ее параметров. Первый параметр функции – это позиция, можно использовать ключевые слова. Второй и третий параметры - это значение цвета и его положение в градиенте.

Для указания позиции вначале пишется to , а затем добавляются ключевые слова top, bottom, left, right и их сочетания, порядок слов не важен. Также, вместо ключевого слова можно задавать угол наклона градиентной линии, показывающий направление градиента. Сначала пишется положительное или отрицательное значение угла, после чего к нему добавляется deg , пример - 30deg.

Чтобы создать сложный градиент, понадобится больше чем 2 цвета - CSS3 позволяет добавить неограниченное количество цветов через запятую. Можно применить прозрачный и полупрозрачный цвета. Для точного позиционирования цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах.

Что касается радиальных градиентов, то они похожи на линейные градиенты. Чем отличаются линейный и радиальный градиент ? Тем, что в радиальных один цвет переходит в другой словно круги по воде вокруг точки, а не вдоль прямой линии. Есть две формы радиального градиента: circle (круг) и ellipse (эллипс). Они различаются внешним видом, по умолчанию используется форма эллипс. Также с формой градиента можно задать и его размер, зависящий от применяемых ключевых слов - размер указывается через пробел после формы градиента.

Подробно увидеть возможные значения параметров этих функций можно в консоли разработчика, указав нужную функцию – после развернуть список значений кликнув по стрелочке.

Таким образом, создать градиент с помощью CSS может каждый. При помощи градиентов можно делать уникальные элементы на сайте, например, при помощи градиентов и свойства background-size можно получить различные фоновые картинки без использования изображений. Но самому разрабатывать градиенты может быть не очень удобно, поэтому в сети есть готовые сервисы для генерации кода градиентов.

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

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

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

Результат данного примера показан на рис. 1. Обратите внимание, что пример корректно работает в IE10 и Opera 12, ранние версии этих браузеров не поддерживают радиальные градиенты, и не работает в Safari 5.1, который требует наличие префикса -webkit.

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

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

Позиция точки пишется аналогично значениям свойства 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), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.

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

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

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

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

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

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

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

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

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

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

Табл. 1. Ключевые слова для изменения размера градиента

Значение	Код	Описание	Вид
	background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000);	Форма градиента совпадает с ближайшей к нему стороной блока.
	background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
	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);	Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

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

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

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

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

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

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

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

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

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

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

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

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