Как анимировать градиентный текст с помощью CSS

Добавлено пользователем arturbaranok - 17.02.2026 - 13:37

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

Как анимировать градиентный текст с помощью CSS

Ниже разберём, как создать эффект, который кажется сложным, всего за несколько строк кода.

Создаём текст в HTML

Начнём с добавления текстового элемента на страницу. В нашем примере это заголовок:

<h1 class="animated-gr">WEBLABY</h1>

Здесь создаётся <h1> с классом animated-gradient. Именно этот класс станет основой для анимации градиента в CSS.

Настройка анимации градиента в CSS

Главное — это CSS. Определим градиент и заставим его двигаться с помощью следующего кода:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&amp;display=swap');


@keyframes gradient-shift {
  0% {background-position: 0%}
  100% {background-position: 100%}
}
 
.animated-gr {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  background: linear-gradient(270deg, #ff4b59, #ff9057, #ffc764, #50e3c2, #4a90e2, #b8e986, #ff4b59);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

Что делает этот CSS:

@import url: подключает шрифт Open Sans с Google Fonts, который отличается современным и чистым видом.
@keyframes: здесь создаётся анимация gradient-shift, которая создаёт эффект движения градиента, смещая фон от 0% до 100%.
font-family и font-size: задают шрифт Open Sans и размер текста 2em.
background: создаёт линейный градиент с яркой цветовой гаммой под углом 270°, обеспечивая движение цветов слева направо.
background-size: увеличивает фон до 200%, что усиливает ощущение движения.
-webkit-background-clip и -webkit-text-fill-color: делают текст прозрачным, позволяя градиенту проявляться через буквы.
animation: применяет анимацию gradient-shift с плавной функцией ease-in-out, которая повторяется бесконечно, создавая непрерывную смену цветов.

Результат

В итоге мы получаем яркий, динамичный градиентный текст, который постоянно меняет цвета и привлекает внимание.

See the Pen Animated by WEBLABY (@weblaby) on CodePen.

Заключение

Создать анимацию градиентного текста проще, чем кажется, а возможности для экспериментов практически безграничны. Используя этот подход, можно:

Применять различные цветовые схемы и направления градиента.
Анимировать заголовки, кнопки или другие элементы интерфейса.
Добавлять тонкие анимированные акценты в дизайн.

CSS даёт гибкость и мощь для творчества. Также можно исследовать дополнительные возможности анимаций через @keyframes и изменять другие свойства для ещё более динамичного эффекта. Погрузитесь в мир CSS-анимаций с нашим подробным руководством по ключевым кадрам (CSS keyframes).