Как создать текстовые градиенты в 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;
}
}
Этот метод позволяет применять градиенты к отдельным словам или нескольким строкам текста.
Вот пример:
Вот и всё!
