Функция 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 |
Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока. |
Замечание
Тип и форму можно менять местами, а вот позиция
должна идти в конце первого параметра: farthest-corner
circle at 30px 60px работает,
circle farthest-corner at 30px
60px работает, at 30px 60px
circle farthest-corner не работает.
Тип градиента и его размер не работают друг с другом (логично, они ведь конфликтуют). Выигрывает размер.
Пример . Самый простой вариант
Давайте просто зададим начальный и конечный цвет:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Пример . Добавим позицию
В данном примере позиция градиента (положение
его центра) задается первым параметром at
30px 100px, где at - обязательное
ключевое слово, 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 в различных комбинациях. Поставим, к примеру, градиент справа по центру. Для этого первый параметр установим в at 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: 200px;
height: 200px;
}
:
Пример . Добавим позицию
Давайте к предыдущему коду добавим еще и позицию градиента:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 200px;
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,
которая создает повторяющийся радиальный градиент