Текст с градиентом

13.09.2018

53423

Градиент в цвет шрифта можно добавить с помощью следующих CSS свойств:

color: transparent; – задает прозрачный цвет шрифта.
background-clip: text; – окрашивает текст в цвет или изображение указанного в background-image.
background-image: linear-gradient или background-image: radial-gradient – задает градиент.

Свойство background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit-.

.class {
	-webkit-background-clip: text;
	background-clip: text;
}

CSS

Градиент по горизонтали

<h1><span class="gradient">Градиент</span> по горизонтали</h1>

<p class="gradient">
	...
</p>

<style>
.gradient {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to right, red, fuchsia);
}
</style>

HTML

Градиент по вертикали

<h1><span class="gradient">Градиент</span> по вертикали</h1>

<p class="gradient">
	...
</p>

<style>
.gradient {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to bottom, red, fuchsia);
}
</style>

HTML

Градиент по диагонали

Направление градиента можно указать в градусах:

Градус	Направление	Градус	Направление
0, 360deg		180deg
45deg		225deg
90deg		270deg
135deg		315deg

<h1><span class="gradient">Градиент</span> по диагонали</h1>

<p class="gradient">
	...
</p>

<style>
.gradient {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(135deg, red, fuchsia);
}
</style>

HTML

Градиент из нескольких цветов

<h1>Многоцветный <span class="gradient">градиент</span></h1>

<p class="gradient">
	...
</p>

<style>
.gradient {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, red, orange, fuchsia); 
}
</style>

HTML

Радиальный градиент

<h1>Радиальный <span class="gradient">градиент</span></h1>

<p class="gradient">
	...
</p>

<style>
.gradient {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: radial-gradient(red, fuchsia);
}
</style>

HTML

Цвет текста картинкой

<h1>Цвет текста <span class="bg-text">картинкой</span></h1>

<p class="bg-text">
	...
</p>

<style>
.bg-text {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;    
	background-image: url('/img/bg-text.jpg');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
</style>

HTML