# Функция radial-gradient

Функция `radial-gradient` задает радиальный градиент. Данная функция применяется к свойствам, которые задают картинку фона: `background`, `background-image` или картинку границы: `border-image`, `background-image-source`.

## Синтаксис

`селектор { background: radial-gradient([форма тип позиция], цвет1 размер1, цвет2 размер2...); }`

## Значения

Значение | Описание
--- | ---
форма | Принимаемые значения: `ellipse` эллиптический градиент (по умолчанию), `circle` круговой градиент.
тип | Задает растяжение градиента. Принимаемые значения: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
позиция | После ключевого слова `at` указывается позиция в любых единицах для размера или с помощью ключевых слов `top`, `bottom`, `left`, `right`, `center` в различных комбинациях.
цвет1 | Начальный цвет градиента в любых единицах для цвета.
цвет2 | Конечный цвет градиента в любых единицах для цвета.
размер | Задает протяженность определенного цвета градиента в любых единицах для размера.

## Значения для типа

Значение | Описание
--- | ---
`closest-side` | Форма градиента совпадает с ближайшей к нему стороной блока.
`closest-corner` | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
`farthest-side` | Градиент распространяется до дальней стороны блока.
`farthest-corner` | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока.

## Замечание

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

## Пример . Самый простой вариант

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

`<div id="elem"></div>` `#elem { background: radial-gradient(red, blue); width: 200px; height: 200px; }`

:

## Пример . Добавим позицию

Давайте зададим положение центра: `30px` - отступ слева, `100px` - отступ сверху:

`<div id="elem"></div>` `#elem { background: radial-gradient(at 30px 100px, red, blue); width: 200px; height: 200px; }`

:

## Пример . Позиция в процентах

Давайте зададим положение центра в процентах: `30%` - отступ слева, `50%` - отступ сверху:

`<div id="elem"></div>` `#elem { background: radial-gradient(at 30% 50%, red, blue); width: 200px; height: 200px; }`

:

## Пример . Позиция ключевым словом

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

`<div id="elem"></div>` `#elem { background: radial-gradient(at right center, red, blue); width: 200px; height: 200px; }`

:

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

В данном случае градиент будет работать так: от `0px` до `20px` будет чистый красный цвет, от `20px` до `60px` - градиент от красного к голубому, после `60px` - чистый голубой:

`<div id="elem"></div>` `#elem { background: radial-gradient(red 20px, blue 60px); width: 200px; height: 200px; }`

:

## Пример . Несколько цветов подряд

В данном случае градиент будет работать так: от `0px` до `20px` будет чистый красный цвет, от `20px` до `40px` будет чистый голубой цвет, от `40px` до `60px` - градиент от голубого к зеленому, после `60px` - чистый зеленый:

`<div id="elem"></div>` `#elem { background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px); width: 200px; height: 200px; }`

:

## Пример . Размер + позиция

Давайте одновременно зададим размеры для разных цветов и позицию центра градиента:

`<div id="elem"></div>` `#elem { background: radial-gradient(at 30px 60px, red 20px, blue 60px); width: 200px; height: 200px; }`

:

## Пример . Форма градиента

Форма градиента задается первым параметром и может принимать `2` значения: `circle` (круговой градиент) или `ellipse` (эллиптический градиент, по умолчанию). Почему же до этого мы не видели эллиптических градиентов, хотя он задается по умолчанию? Потому что до этого форма блоков была квадратная. Если мы изменим форму на прямоугольную, то увидим эллиптический градиент:

`<div id="elem"></div>` `#elem { background: radial-gradient(red 20px, blue 60px); width: 300px; height: 200px; }`

:

## Пример . Круглый градиент

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

`<div id="elem"></div>` `#elem { background: radial-gradient(circle, red 20px, blue 60px); width: 300px; height: 200px; }`

:

## Пример . Добавим позицию

Давайте к предыдущему коду добавим еще и позицию градиента:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle at 30px 60px, red 20px, blue 60px); width: 300px; height: 200px; }`

:

## Пример . Тип farthest-corner + circle

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

`<div id="elem"></div>` `#elem { background: radial-gradient(circle farthest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип farthest-corner + ellipse

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

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип farthest-side + circle

Градиент распространяется до дальней стороны блока:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle farthest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип farthest-side + ellipse

Градиент распространяется до дальней стороны блока:

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип closest-corner + circle

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

`<div id="elem"></div>` `#elem { background: radial-gradient(circle closest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип closest-corner + ellipse

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

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип closest-side + circle

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

`<div id="elem"></div>` `#elem { background: radial-gradient(circle closest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Пример . Тип closest-side + ellipse

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

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse closest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Смотрите также

- функцию `linear-gradient`,
  которая создает линейный градиент
- функцию `repeating-linear-gradient`,
  которая создает повторяющийся линейный градиент
- функцию `repeating-radial-gradient`,
  которая создает повторяющийся радиальный градиент

← →
↑
en ru