Радиальный градиент CSS radial-gradient. Примеры. Круговой градиент в html

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

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

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

background: radial-gradient([at позиция форма размер,] цвет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 для сайта).

Примечание 1

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

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

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

Примечание 2

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

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

Примечание 3

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

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

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

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

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

<html>
<head>
<style>
	.primer1{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at 20% 50%, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
	.primer2{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at 75% 40%, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
	.primer3{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at 180px 40px, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
	.primer4{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(at top, #ADFF2F, #228B22, #006400);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer1"></div> 
	<div class="primer2"></div> 
	<div class="primer3"></div> 
	<div class="primer4"></div> 
</body>
</html>

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

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

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

<html>
<head>
<style>
	.primer5{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle closest-side at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
	.primer6{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle closest-corner at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
	.primer7{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle farthest-side at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
	.primer8{
	width: 400px; 
	height: 150px; 
	background: radial-gradient(circle farthest-corner at 70px 50px, #ADFF2F, #006400);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer5"></div> 
	<div class="primer6"></div> 
	<div class="primer7"></div> 
	<div class="primer8"></div> 
</body>
</html>

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

closest-side
Ближайшая граница

closest-corner
Ближайший угол

farthest-side
Дальняя граница

farthest-corner
Дальний угол

Пример 3. Резкие переходы радиального градиента

У каждого цвета можно указывать его границы. Задавать их можно как в процентах, так и в абсолютных значениях. Например

background: radial-gradient(цвет1 20%, цвет2 70%, цвет3 100%)

Приведем практический пример

<html>
<head>
<style>
	.primer9{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(circle at center, #00FF7F 10%, #228B22 60%, #006400 70%, #211 100%);
	margin: 10px; 
	}
	.primer9{
	width: 200px; 
	height: 200px; 
	background: radial-gradient(circle at center, #000 5%, #fff 7%, #000 30%, #fff 80%, #000 83%);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer9"></div> 
	<div class="primer10"></div> 
</body>
</html>

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

← Перейти в каталог CSS уроков