Круглый градиент. CSS: Радиальный градиент для фона. Синтаксис CSS radial-gradient

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

Радиальный градиент создаётся с помощью свойства background или background-image .

Синтаксис

background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? , | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? , | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? , | at <позиция> , <цвет> [ , <цвет> ]*)

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>

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

  • top left = left top = 0% 0% (в левом верхнем углу);
  • top = top center = center top = 50% 0% (по центру вверху);
  • right top = top right = 100% 0% (в правом верхнем углу);
  • left = left center = center left = 0% 50% (по левому краю и по центру);
  • center = center center = 50% 50% (по центру) - это значение по умолчанию;
  • right = right center = center right = 100% 50% (по правому краю и по центру);
  • bottom left = left bottom = 0% 100% (в левом нижнем углу);
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
  • bottom right = right bottom = 100% 100% (в правом нижнем углу).
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. <размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. Табл. 1. Ключевые слова для изменения размера градиента
Значение Код Описание Вид
closest-side

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

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

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

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

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

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

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

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

Похож по своему действию на closest-side , но градиент распространяется до дальней стороны блока.
farthest-corner

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

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

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

Пример

Градиент

Градиент

Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.

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

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient() .

Opera до версии 12.10 поддерживает -o-radial-gradient() .

Firefox до версии 16 поддерживает -moz-radial-gradient() .

Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.

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);

Размер

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


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

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

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

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

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

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

CSS-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .

Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .

Как сделать градиент в CSS

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

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Линейный градиент linear-gradient()


Рис. 1. Линия градиента, начальная и конечная точки и угол градиента

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

Если направление не указано, используется значение по умолчанию — сверху-вниз .

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

Background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

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

Div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }

с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.

Div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }

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

Div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops . Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:

Div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

Div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }

2. Радиальный градиент radial-gradient()

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

Background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);

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

Div { height: 200px; background: radial-gradient(white, #FFA9A1); }

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .

Div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }

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

Div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); }

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

Мяч

div { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); }

Кнопка

.wrap { height: 200px; padding: 50px 0; background: #cccccc; } .button { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); }

Почтовая марка


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

Jpg">

.container { background: #B7D1D8; padding: 25px; } .wrap { background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; } img { width: 100%; }

3. Повтор градиента

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

Div { height: 200px; background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } div { height: 200px; background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); }

4. Кроссбраузерный градиент

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

Линейный градиент

Ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

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

Background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

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

Background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

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

Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

5. Комбинация градиента и фонового изображения

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

div { height: 453px; background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg); background-size: cover; }

CSS-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .

Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .

Как сделать градиент в CSS

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

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Линейный градиент linear-gradient()


Рис. 1. Линия градиента, начальная и конечная точки и угол градиента

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

Если направление не указано, используется значение по умолчанию — сверху-вниз .

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

Background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

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

Div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }

с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.

Div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }

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

Div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops . Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:

Div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

Div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }

2. Радиальный градиент radial-gradient()

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

Background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);

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

Div { height: 200px; background: radial-gradient(white, #FFA9A1); }

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .

Div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }

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

Div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); }

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

Мяч

div { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); }

Кнопка

.wrap { height: 200px; padding: 50px 0; background: #cccccc; } .button { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); }

Почтовая марка


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

Jpg">

.container { background: #B7D1D8; padding: 25px; } .wrap { background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; } img { width: 100%; }

3. Повтор градиента

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

Div { height: 200px; background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } div { height: 200px; background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); }

4. Кроссбраузерный градиент

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

Линейный градиент

Ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

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

Background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

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

Background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

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

Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

5. Комбинация градиента и фонового изображения

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

div { height: 453px; background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg); background-size: cover; }

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

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

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

Градиент

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

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

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

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

Если задать позицию начальной точки для примера 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 , тогда мы получим самые разнообразные повторяющиеся фоновые картинки, которые сделаны без использования изображений.