Функция radial-gradient задает радиальный градиент.

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

См. все функции для работы с CSS градиентами: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Синтаксис

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

Можно задавать несколько градиентов, перечисляя их через запятую (главное чтобы они не перекрывали друг друга иначе победит только один из них):

селектор {
	background: 
	linear-gradient(to right, red 0px, blue 30px, transparent 30px), 
	radial-gradient(circle closest-side at center, green, transparent);

}

Особенности

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

Самый простой вариант

селектор {
	background: radial-gradient(начальный цвет, конечный цвет);
}
селектор {
	background: radial-gradient(red, blue);
}

Результат выполнения кода:

Добавим месторасположение градиента

селектор {
	background: radial-gradient(позиция, начальный цвет, конечный цвет);
}

Положение градиента (положение его центра) задается первым параметром at 30px 100px, где at - обязательное ключевое слово, 30px - отступ слева, 100px - отступ сверху:

селектор {
	background: radial-gradient(at 30px 100px, red, blue);
}

Результат выполнения кода:

Положение можно задавать и в процентах

селектор {
	background: radial-gradient(позиция, начальный цвет, конечный цвет);
}

В данном случае 30% - отступ слева, 50% - отступ сверху:

селектор {
	background: radial-gradient(at 30% 50%, red, blue);
}

Результат выполнения кода:

Положение можно задавать ключевым словом

селектор {
	background: radial-gradient(позиция, начальный цвет, конечный цвет);
}

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

селектор {
	background: radial-gradient(at right center, red, blue);
}

Результат выполнения кода:

Размер градиента

селектор {
	background: radial-gradient(начальный_цвет размер, конечный_цвет размер);
}

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

селектор {
	background: radial-gradient(red 20px, blue 60px);
}

Результат выполнения кода:

Размер также можно задавать и в процентах.

Несколько цветов подряд

селектор {
	background: radial-gradient(цвет1 размер1, цвет2 размер2, цвет3 размер3...);
}

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

селектор {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
}

Результат выполнения кода:

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

селектор {
	background: radial-gradient(позиция, начальный_цвет размер, конечный_цвет размер);
}
селектор {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
}

Результат выполнения кода:

Форма градиента

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

селектор {
	background: radial-gradient(цвет1 размер1, цвет2 размер2);
}
селектор {
	background: radial-gradient(red 20px, blue 60px);
}

Результат выполнения кода:

Круглый градиент в прямоугольном блоке

Зададим первым параметром круглую форму градиента с помощью ключевого слова circle:

селектор {
	background: radial-gradient(форма, цвет1 размер1, цвет2 размер2);
}
селектор {
	background: radial-gradient(circle, red 20px, blue 60px);
}

Результат выполнения кода:

Добавим позицию градиента

селектор {
	background: radial-gradient(форма позиция, цвет1 размер1, цвет2 размер2);
}
селектор {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
}

Результат выполнения кода:

Добавим тип градиента

селектор {
	background: radial-gradient(тип форма позиция, цвет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 не работает.

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

Тип farthest-corner

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

селектор {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

Тип farthest-side

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

селектор {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

Тип closest-corner

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

селектор {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

Тип closest-side

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

селектор {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

Значения

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

Значение по умолчанию: нет (?).

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

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

Значение по умолчанию: ?.

Значения для позиции

В левом верхнем углу 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%

Значение по умолчанию: at center = at center center = at 50% 50% (по центру).

Кроссбраузерный код

Во всех примерах для простоты были опущены кроссбраузерные приставки, но их нужно писать. Смотрите пример:

#elem {
	background: #000; /* Для старых браузров */
	background: -webkit-radial-gradient(at top, #000, #fff);
	background: -moz-radial-gradient(at top, #000, #fff);
	background: -o-radial-gradient(at top, #000, #fff);
	background: radial-gradient(at top, #000, #fff);
}