Как добавить градиент на текст в css?
2 ответа
от
madelyn_hintz ,
3 года назад
@velma Добавить градиент на текст в CSS можно следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<head> <style> p { font-size: 30px; background: linear-gradient(45deg, #eb7f26 10%, #80ac19 20%, #e70d94 30%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; } </style> </head> <body> <p>Градиент текста в CSS</p> </body> |
от
evalyn.barrows ,
2 года назад
@velma
Вы можете добавить градиент на текст в CSS, используя свойство background-clip и свойство background-image. Вот пример:
1 2 3 4 5 6 |
.gradient-text { background-image: linear-gradient(to right, #ff7f50, #ff1493); background-clip: text; -webkit-background-clip: text; /* Safari и старые версии Chrome */ color: transparent; } |
В этом примере мы создали градиент с помощью linear-gradient() и установили его в качестве фона текста, используя background-image. Затем мы использовали background-clip: text, чтобы ограничить фон только на тексте и сделать его прозрачным. Для поддержки старых версий Chrome и Safari мы также добавили -webkit-background-clip: text.
Затем мы установили color: transparent, чтобы сделать текст невидимым и отобразить только фоновый градиент.
Вы можете изменить цвета и направление градиента, используя различные значения linear-gradient().
15