Как сделать градиент текста на CSS ❎ Вебмастеринг без воды

Задача. Необходимо сделать цвет текста градиентом, но в CSS-свойстве color нельзя задать градиент.

Как сделать градиент текста в CSS

Решение. Т.к. тексту нельзя задать градиентное значение в color, используем следующий вариант HTML + CSS:


  <span class="gradient-text">КАК СДЕЛАТЬ ГРАДИЕНТ ТЕКСТА В CSS</span>

.gradient-text {
  /* Запасной вариант цвета фона. */
  background-color: red;
  
  /* Задаем градиент. */
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
  
  /* Размер фона и повторение свойства. */
  background-size: 100%;
  background-repeat: repeat;

  /* Используем текст в качестве маски для фона. */
  /* Это покажет градиент как цвет текста, а не элемент background. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;}

<span class="gradient-text">КАК СДЕЛАТЬ ГРАДИЕНТ ТЕКСТА В CSS</span>

.gradient-text {

/* Запасной вариант цвета фона. */

background-color: red;

/* Задаем градиент. */

background-image: linear-gradient(45deg, #f3ec78, #af4261);

/* Размер фона и повторение свойства. */

background-size: 100%;

background-repeat: repeat;

/* Используем текст в качестве маски для фона. */

/* Это покажет градиент как цвет текста, а не элемент background. */

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

-moz-background-clip: text;

-moz-text-fill-color: transparent;}