HTML/CSS

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

Градиент в цвет шрифта можно добавить с помощью следующих 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;
}
1

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

<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>
2

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

<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>
3

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

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

Градус Направление Градус Направление
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>
4

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

<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>
5

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

<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>
6

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

<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>
13 сентября 2018
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
Иногда возникает необходимость сверстать список характеристик товара в две колонки или содержание статьи. Чтобы...
Часто приходится делать меню на всю ширину какого-либо блока или окна. При этом оно должно: растягиваться на всю ширину...
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
Сборник методов как сделать HTML таблицу «полосатой» или, как ее еще называют «таблица с зеброй».
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.