Как сделать градиентный текст css?
2 ответа
от
helmer ,
2 года назад
@nicolette.stoltenberg Сделать градиентный текст в CSS можно так:
HTML:
1 2 3 |
<body> <p>Градиентный текст</p> </body> |
CSS:
1 2 3 4 5 6 |
p{ background: linear-gradient( #0B2349 33%, #bc0da5 66%, #8AA9D6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 50px; } |
от
akeem ,
8 месяцев назад
@nicolette.stoltenberg
Чтобы создать градиентный текст в CSS, можно использовать свойство background-clip и background-image, которые позволяют применять градиентный фон к тексту. Вот пример кода:
1 2 3 4 5 6 7 |
.gradient-text { background-image: linear-gradient(to right, #f00, #00f); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; } |
В этом примере мы задали линейный градиент от красного до синего цвета с помощью свойства background-image. Затем мы применили этот градиентный фон к тексту, используя свойство background-clip и установив его значение text. Чтобы текст стал невидимым и показывал только фон, мы задали цвет текста как прозрачный с помощью свойства color.
Обратите внимание, что этот метод не поддерживается всеми браузерами, поэтому стоит проверить его на разных платформах и устройствах.
15