CSS: Радиальный градиент для фона. Radial-gradient(): радиальный градиент Радиальный градиент radial-gradient()

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 цветов .

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

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

Background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

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

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

Чтобы градиент имел форму круга - это нужно задать явно с помощью ключевого слова circle .

Если форма не задана, но задан размер - одно значение задает радиус круга, если значений два - градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Положение определяет где будет расположен центр градиента. Используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top , at right , at bottom , at left и at center - значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top - в верхнем правом углу.

Ниже можно увидеть как работают разные положения:

Код первого квадрата:

Background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px .

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

Если задано одно значение - оно считается радиусом круглого градиента. Если задано два значения - первое считается горизонтальным радиусом эллипса, второе - вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

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

Некоторым градиентам добавлено положение at bottom , чтобы было лучше видно действие кода:

Радиальный градиент также может быть повторяющимся - это repeating-radial-gradient .

Примерный код:

Background: repeating-radial-gradient(circle, darkkhaki, darkkhaki .5em, transparent .5em, transparent 1.5em);

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

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

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

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

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

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Composition of a radial gradient

A radial gradient is defined by a center point , an ending shape , and two or more color-stop points .

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100% . Each shape is a single color determined by the color on the gradient ray it intersects.

Syntax

/* A gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%)

Values

(or ) CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the background-position and offset-anchor properties."> The position of the gradient, interpreted in the same way as background-position or transform-origin . If unspecified, it defaults to center . The gradient"s shape. The value can be circle (meaning that the gradient"s shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse . A keyword describing how big the ending shape must be. The possible values are:

Keyword	Description
closest-side	The gradient"s ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner	The gradient"s ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-side	Similar to closest-side , except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-corner	The default value, the gradient"s ending shape is sized so that it exactly meets the farthest corner of the box from its center.

Note: Early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side , respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

A color-stop"s CSS data type represents a color in the sRGB color space. A may also include an alpha-channel transparency value, indicating how the color should composite with its background."> value, followed by an one or two optional stop positions (either a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> or a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> along the gradient"s axis). A percentage of 0% , or a length of 0 , represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions. Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Formal syntax

radial-gradient([ [ circle || ] [ at ]? , | [ ellipse || [ | ]{2} ] [ at ]? , | [ [ circle | ellipse ] || ] ? , | at , ]? [ , ]+) where = closest-corner | closest-side | farthest-corner | farthest-side and = [ [, ? ]? ]#, and = [ ]? and = [ | ]{1,2} and = [ | ]

Note that negative "s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note .

Examples

Simple gradient

Radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); }

Non-centered gradient

.radial-gradient { width: 240px; height: 120px; }

Radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%); }

Specifications

Specification	Status	Comment
CSS Images Module Level 3 The definition of "radial-gradients()" in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
radial-gradient()	Chrome Full support 26 Full support 26 Full support 13 Prefixed Prefixed	Edge Full support 12	Firefox Full support 16 Notes Full support 16 Notes Notes Before Firefox 36, gradients weren"t applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 3.6 Prefixed Notes Prefixed Prefixed Prefixed Prefixed Disabled Prefixed	IE Full support 10 Notes Full support 10 Notes Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: .	Opera Full support 12.1 Full support 12.1 No support 11.6 - 15 Prefixed Prefixed Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed Notes Prefixed -webkit-gradient(radial,…)	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes Full support 16 Notes Notes Before Firefox 36, gradients weren"t applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 4 Prefixed Notes Prefixed Implemented with the vendor prefix: -moz- Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false . Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 12.1 Full support 12.1 No support 12 - 14 Prefixed Prefixed Implemented with the vendor prefix: -o- Full support 14 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS Full support 6.1 Full support 6.1 Full support 6 Prefixed Notes Prefixed Implemented with the vendor prefix: -webkit- Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
at syntax	Chrome Full support 26	Edge Full support 12	Firefox Full support 16 Notes Full support 16 Notes Notes Before Firefox 36, gradients weren"t applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 10 Prefixed Notes Prefixed Implemented with the vendor prefix: -moz- Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false . Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 10	Opera Full support 15 Full support 15 No support 11.6 - 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari No support No	WebView Android Full support ≤37	Chrome Android Full support 26	Firefox Android Full support 16 Full support 16 Full support 10 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android Full support 14 Full support 14 No support 12 - 14 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS No support No	Samsung Internet Android Full support 1.5
Double-position color stops	Chrome Full support 71	Edge Full support 79	Firefox Full support 64	IE No support No	Opera Full support 58	Safari Full support 12.1	WebView Android Full support 71	Chrome Android Full support 71	Firefox Android Full support 64	Opera Android Full support 50	Safari iOS Full support 12.2	Samsung Internet Android Full support 10.0
Interpolation Hints / Gradient Midpoints	Chrome Full support 40	Edge Full support 79	Firefox Full support 36	IE No support No	Opera Full support 27	Safari Full support 6.1	WebView Android Full support 40	Chrome Android Full support 40	Firefox Android Full support 36	Opera Android Full support 27	Safari iOS Full support 6.1	Samsung Internet Android Full support 4.0

Legend

Full support Full support No support No support See implementation notes. See implementation notes. User must explicitly enable this feature. User must explicitly enable this feature. Requires a vendor prefix or different name for use.

Quantum CSS notes

Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn"t because of the missing comma between circle and gold . Also,