Анимированный градиентный текст

Предлагаю в сегодняшней статье посмотреть как можно оформить необычно текст градиентом. Градиент сам по себе довольно красивое декорирование. Но сегодняшняя статья о том, как сделать анимированный градиентный текст.

Градиент может быть линейным и радиальным.

Линейный градиент linear-gradient. Создаваться может с помощью двух и более цветов, идущих в разных, заданных направлениях: вниз/вверх/влево/вправо/по диагонали.

Радиальный градиент radial-gradient. Цвета выходят из центра градиента и распределяются наружу, создавая форму круга или эллипса.

Повтор градиента: repeating-linear-gradient и repeating-radial-gradient. Используя повторение любого вида градиента, можно создавать разнообразные узоры - паттерны. Полоски, горошек, зигзаги, ромбы и более сложные узоры способен сделать обычный градиент.

Градиентом можно оформлять - кнопки, рамки, текст, фон и многое другое.

Градиент поддерживает прозрачность. Его можно наслаивать друг на друга.

В оформлении сайтов без градиента обойтись сложно.

Предложенными, в сегодняшней статье кодами, можно оформить заголовки, обычный текс, цитаты и т.д.

Так же о градиенте читайте в статьях:

Золотой текст

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

Анимированный градиент

Программы для создания градиентного текста

В предложенных кодах можно менять h2 на другие теги:

<p>Обычный текст</p>

<title>Название</title>

<h1>Заголовок 1</h1>

<h3>Заголовок 3</h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

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

Вариант 1

<h2>Ваш текст</h2>
<style>
h2 {
animation: move 4s linear infinite;
background-image: linear-gradient(to right, #77f, #33d0ff, #25ffbb, #33d0ff, #77f);
background-size: 200% auto;
text-align: center;
font: 700 70px/1 Arial;
letter-spacing: 1px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes move { to { background-position: 200% center; } }</style>

Цвет градиента можно менять - выделила красным.

Шрифт, его толщина и размер - синим.

Вариант 2

Код:

<p class="text">Ваш градиентный текст</p>
<style>
.text{
font: normal bold 3.5rem 'Arial', sans-serif;
text-align: center;
text-transform: uppercase;
background-image: linear-gradient(to right, #00F260, #f79d00, #0575E6, #64f38c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 300%;
background-position: -100%;
animation: animatedText 5s infinite alternate-reverse;
}
@keyframes animatedText{
to{
background-position: 100%;
}
}</style>

Меняем шрифт, его толщину, размер - в коде выделила красным цветом.

Оранжевым цветом - цвет градиента.

Вариант 3

Код:

<p class="text">Ваш градиентный текст</p>
<style>
.text {
background: linear-gradient(to top, #F5F5F5 20%, #607D8B 50%, #F5F5F5 80%);
background-size: 200% auto;
font: normal bold 3.5rem 'Arial', sans-serif;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-position: center 2.5em;
animation: shine 3s linear infinite;
}
@keyframes shine {
to {
background-position: center 100%;
}
}
</style>

Шрифт, его размер в коде выделила красным. Цвета градиента - зелёным.

Вариант 4

<h2 class="linear-wipe">Ваш градиентный текст</h2>
<style>
h2 {
font-size: 5vw;
font-family: sans-serif;
}
.linear-wipe {
text-align: center;
background: linear-gradient(to right, purple 95%, cyan, purple);
background-size: 200% auto;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 3s linear infinite alternate;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
</style>

Красным в коде отмечен бегающий градиент.

Зелёным - цвет букв.

Синим - размер шрифта.