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

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 { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%); }

Specifications

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

Legend

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,

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

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

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

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

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

CSS синтаксис:

Форма

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

Keyword

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

Размер

Задает размер формы градиента. Значения 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 цветов .

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

Радиальный градиент задается с помощью свойства radial-gradient совместно с background . У него есть довольно много параметров, которые мы рассмотрим последовательно.

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

background : radial-gradient ( цвет1, цвет2,... );

• позиция - начальные координаты Х и У (чаще всего задаются в процентах). Есть константы:
  • top - по центру сверху (50% 0%)
  • left top - верхний левый угол (0% 0%)
  • right top - верхний правый угол (100% 0%)
  • center (стоит по умолчанию) - центр области (50% 50%)
  • left center - слева по центру (0% 50%)
  • right center - справа по центру (100% 50%)
  • bottom - снизу по центру (50% 100%)
  • left bottom - слева снизу (0% 100%)
  • right bottom - справа снизу (100% 100%)
  Обязательно необходимо ключевое слово at.
• форма - задание формы градиента. Есть два варианта:
  • circle - круг
  • ellipse - эллипс
• размер - как будет растягиваться градиент. Может принимать следующие значения
  • closest-side - градиент стремится к ближайшей границе элемента.
  • closest-corner - градиент стремится к ближайшему углу.
  • farthest-side (по умолчанию) - градиент распространяется до дальней границы элемента.
  • closest-corner - градиент распространяется до дальнего угла элемента.
  Ниже будут приведена таблица с примерами
• цвет1 - начальный цвет
• цвет2 - конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в фомрате rgba (см. коды цветов html для сайта).

Можно задавать переход нескольких цветов через запятую.

В самом простом варианте можно задать только два цвета. Например

background : radial-gradient (#ADFF2F, #006400 )

Для браузеров нужно задавать это свойство с вендорными префиксами : -moz-,-webkit-, -ms-, -o-:

background : -moz-radial-gradient background : -webkit-radial-gradient background : -ms-radial-gradient background : -o-radial-gradient

Свойство radial-gradient также можно сделать повторяющимся: repeating-radial-gradient

background : repeating-radial-gradient (circle, #8FBC8F, #8FBC8F .5em, transparent .5em, transparent 1.5em );

Примеры с радиальными градиентами

Пример 1. Разная позиция старта

Через ключевое слово at можно задавать позицию центра радиального градиента.

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

Ниже представлен пример, который показывает работу границы

На странице преобразуется в следующее

When we talk about gradients, it"s worth beginning with the fact that gradients are an image replacement in CSS. That"s a fancy way of saying that creating a gradient in CSS provides the browser with instructions for painting an image on the screen rather than you providing the browser with the source URL of a file you created in an image editing application, like Photoshop or Sketch. It"s a native CSS way for doing the same thing in code and, as such, gradients are included in the CSS Image Values and Replaced Content specification .

You can see how that gradient assumes the shape is ellipse . That"s because the element itself is not a perfect square. In that case, it would have assumed a circle instead. Pretty smart! Here"s what would happen if we had explicitly declared circle as the shape value:

Gradient { background-image: radial-gradient(circle, yellow, #f06d06); }

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. Now we can explicitly declare the position value to ensure that the fade ends by the "closest-side" of the shape instead, like this:

Gradient { background-image: radial-gradient(circle closest-side, yellow, #f06d06); }

The possible values there are: closest-corner , closest-side , farthest-corner , farthest-side . You can think of it like: "I want this radial gradient to fade from the center point to the __________ , and everywhere else fills in to accommodate that."

A radial gradient doesn"t have to start at the default center either, you can specify a certain point by using "at ______ " as part of the first parameter, like:

Gradient { background-image: radial-gradient(circle at top right, yellow, #f06d06); }

I"ll make it more obvious here by making the example a square and adjusting a color-stop:

Browser Support

Browser support for radial-gradient() is largely the same as . The exception is a very old version of Opera. Right when they started supporting gradients they only accounted for linear and not radial.

But similar to linear-gradient() , if your browser support needs to go super deep, then you might consider using or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from