Как сделать градиентный текст css

Чтобы создать градиентный текст в CSS, нужно использовать свойство background-clip и text-fill-color. Вот пример кода:

HTML:

<h1 class="gradient-text">Градиентный текст</h1>

CSS:

.gradient-text {
  background: linear-gradient(to right, #ff00b3, #8c00ff); /* задаем градиентный фон */
  
  background-clip: text;
  -webkit-background-clip: text; /* задаем область обрезки по тексту для WebKit */
  
  color: transparent; /* скрываем цвет текста */
  -webkit-text-fill-color: transparent; /* скрываем цвет текста для WebKit */
}

В этом примере текст будет отображаться градиентом, который определен через background. Свойства background-clip и text-fill-color устанавливают способ, которым цвет текста будет показан как полупрозрачный на фоне градиента, на который мы установили наш текст.

Обратите внимание, что поддержка данной технологии может отличаться в разных браузерах.