Градиент текста в CSS

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

Чтобы применить цвет градиента к вашему тексту, сначала вам нужно создать фоновый градиент:

.text-gradient {
  // color: linear-gradient(to right, darkblue, darkorchid); // 👈 not working
  background: linear-gradient(to right, darkblue, darkorchid);
}

Затем вам нужно обрезать фон, используя текст в качестве обтравочной маски, и скрыть текст:

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;
}

Для постепенной поддержки всех браузеров:

.text-gradient {
  // 👇 show a solid color in older browsers (e.g., IE11)
  color: darkblue;

  // 👇 show the text gradient in modern browsers
  @supports (--css: variables) {
    background: linear-gradient(to right, darkblue, darkorchid);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Этот метод позволяет применять градиенты к отдельным словам или нескольким строкам текста.

Вот пример:

Вот и всё!

Ссылка на автора - twitter.com/guerriero_se !

---

Себастьяно Герриеро