Линейный градиент CSS linear-gradient. Как сделать градиенты. Примеры

Линейный градиент CSS — это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background.

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

background: linear-gradient(позиция, цвет1, цвет2,...);

Где:

позиция — указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
- to top - переход снизу вверх (0deg)
- to left - переход справа налево (270deg)
- to bottom - переход сверху вниз (180deg)
- to right - переход слева направо (90deg)
- to top left - переход правого нижнего угла к левому верхнему
- to top right - переход от левого нижнего угла к правому верхнему
- to bottom left - переход от правого верхнего угла к левому нижнему
- to bottom right - переход от левого верхнего угла к правому нижнему
Помимо точных значений можно указать угол наклона в deg
цвет1 - начальный цвет
цвет2 - конечный цвет

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

Примечание 1

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

Как сделать нелинейное изменение градиента

Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например

background: linear-gradient(позиция, цвет1 процент, цвет2 процент);

Примечание 2

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

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

Пример 1. Стандартные переходы цветов

<html>
<head>
<style>
	.primer1_to_top{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to top, #006400, #ADFF2F);
	margin: 10px; 
	}
	.primer2_to_left{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to left, #B22222, #FFA07A);
	margin: 10px; 
	}
	.primer3_to_bottom{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to bottom, #9400D3, #DDA0DD);
	margin: 10px; 
	}
	.primer4_to_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to right, #00008B, #BFEFFF);
	margin: 10px; 
	}
	.primer5_to_top_left{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to top left, #006400, #ADFF2F);
	margin: 10px; 
	}
	.primer6_to_left_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to top right, #B22222, #FFA07A);
	margin: 10px; 
	}
	.primer7_to_bottom_left{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to bottom left, #9400D3, #DDA0DD);
	margin: 10px; 
	}
	.primer8_to_bottom_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(to bottom right, #00008B, #BFEFFF);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer1_to_top"></div> 
	<div class="primer2_to_left"></div> 
	<div class="primer3_to_bottom"></div> 
	<div class="primer4_to_right"></div> 
	<div class="primer5_to_top_left"></div> 
	<div class="primer6_to_left_right"></div> 
	<div class="primer7_to_bottom_left"></div> 
	<div class="primer8_to_bottom_right"></div> 
</body>
</html>

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

to top

to left

to bottom

to right

to top left

to left right

to bottom left

to bottom right

Пример 2. Множественный линейный градиент

Сделаем множественный линейных градиент, т.е. цвет будет меняться из одного в другой несколько раз.

<html>
<head>
<style>
	.primer9_to_right{
	width: 300px; 
	height: 100px; 
	background: linear-gradient(90deg, #FFF,#F00,#0F0,#FF00FF,#00F,#000);
	margin: 10px; 
	}
</style>
</head>
<body>
	<div class="primer9_to_right"></div> 
</body>
</html>

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

90deg

Пример 3. Красивая кнопка на сайте с линейным градиентом

Сделаем множественный линейный градиент, т.е. цвет будет меняться из одного в другой несколько раз на примере html кнопки на сайте.

<html>
<head>
<style>
	.knopka{
	width: 200px; 
	background: #8B3A3A; 
	background: linear-gradient(to top, #8B3A3A 0%, #FF8C69 45%, #EEC591 100%); 
	font-size: 15px;  
	padding: 15px; 
	color: #8B3A62; 
	border: 1px solid #FF6347; 
	border-radius: 20px; 
	text-align: center; 
	}
	.knopka:hover {
	background: #EE3B3B; 
	background: linear-gradient(to top, #EE3B3B 0%, #FF8C69 45%, #EE4000 100%); 
	color: #fff; 
	border-radius: 20px; 
	cursor: pointer; 
	}
</style>
</head>
<body>
	<div class="BUTTON">BUTTON</div> 
</body>
</html>

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

BUTTON

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