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

Последнее обновление на 19.12.2023

Как сделать градиентный текст css (пример линейного и радиального градиента)

Код CSS

.gradient-text {
  font-size: 2em;
  background: linear-gradient(135deg, #483D8B 10%, #FF00FF 80%); /*135deg - направление градиента в градусах, */
  -webkit-background-clip: text; /*Обрезаем фон по тексту*/
  background-clip: text;
  -webkit-text-fill-color: transparent; /*Цвет текста прозрачный*/
  display: inline-block;
}
.gradient-new {
  font-size: 2em;
  background: linear-gradient(360deg, rgba(255, 255, 255, 0), rgba(77, 77, 255, 1));
  -webkit-background-clip: text; 
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.gradient-radial {
  font-size: 2em;
  background: radial-gradient(rgba(255, 255, 255, 0), rgba(77, 77, 255, 1));
  -webkit-background-clip: text; 
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

Код html

<div class="gradient-text">Градиентный текст пример</div><br>
<div class="gradient-new">Градиентный текст еще пример</div><br>
<div class="gradient-radial">Градиентный текст радиальный</div><br>

Демонстрация работы — градиент текста CSS