Переливающийся текст на CSS

Простой пример как анимировать линейный градиент, выступающим фоном текста

Пример:

Переливающийся текст

Чем крупнее и жирнее шрифт, тем интереснее и красивее можно настроить эффект переливания.

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Мастурбек:

    Если фон не черный или белый, а задается по хекс коду (#151719, например), не получается сделать цвет фона текста таким же, как цвет фона самой страницы. Как пофиксить?

    Ответить
    • Alexander:

      Текст ставим белый, а mix-blend-mode — multiply

      Ответить
  • Жасмин:

    Я вас люблю.Спасибо Вам за все!❤

    Ответить
  • Vladimir:

    Здравствуйте
    А как сделать чтобы фон было видео?
    И на нем данный CSS код с переливающимся текстом

    Ответить
    • Alexander:

      Общий контейнер ставится в relative, а текст накладывается через absolute;
      Тут можно посмотреть пример, только вместо канваса у вас будет видео, и соотв. другое оформление текста.

      Ответить
  • Женя:

    Как сделать фон прозрачный вообще только текст чтобы был

    Ответить
    • Alexander:

      Не понял, какой фон?
      Сейчас фон блока — белый, фон текста переливается.

      Ответить
  • Наталья:

    а если фон не белый?? Черный фон не получается сделать..

    Ответить
    • Alexander:

      Заменяем / добавляем

      .pouring {
      	background: #000;
      	color: #fff;
      }
      .pouring:before {
      	mix-blend-mode: multiply;
      }
      Ответить