Разноцветный текст

Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?

        
          
          h1 {  background-image:    linear-gradient(250deg,      #833AB4 0%,      #FD1D1D 50%,      #FCB045 100%    );  background-clip: text;  -webkit-background-clip: text;  color: transparent;}
          h1 {
  background-image:
    linear-gradient(250deg,
      #833AB4 0%,
      #FD1D1D 50%,
      #FCB045 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Напишем текст и начнём думать, как решить задачу.

        
          
          <h1>Отпуск — это хорошо!</h1>
          <h1>Отпуск — это хорошо!</h1>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Чтобы сделать разноцветный фон, понадобится свойство background-image. Свойство background-color не подходит, потому что оно не поддерживает градиенты.

Добавим стилей:

        
          
          body {  color: white;}h1 {  background-image:    linear-gradient(250deg,      #833AB4 0%,      #FD1D1D 50%,      #FCB045 100%    );}
          body {
  color: white;
}
h1 {
  background-image:
    linear-gradient(250deg,
      #833AB4 0%,
      #FD1D1D 50%,
      #FCB045 100%
    );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Теперь текст визуально находится поверх разноцветного фона:

Затем превратим текст в трафарет. Для этого понадобится свойство background-clip со значением text.

Свойство не поддерживается Internet Explorer и другими старыми браузерами, а Google Chrome (и браузеры на основе Chromium) могут требовать вендорный префикс. Учтём это:

        
          
          h1 {  ...  background-clip: text;  -webkit-background-clip: text;}
          h1 {
  ...
  background-clip: text;
  -webkit-background-clip: text;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Текст снова стал белым, потому что в body указано это значение. Сделаем его прозрачным и удалим лишние значения. Получаем вот такой результат:

        
          
          h1 {  background-image:    linear-gradient(250deg,      #833AB4 0%,      #FD1D1D 50%,      #FCB045 100%    );  background-clip: text;  -webkit-background-clip: text;  color: transparent;}
          h1 {
  background-image:
    linear-gradient(250deg,
      #833AB4 0%,
      #FD1D1D 50%,
      #FCB045 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Таким же образом можно поставить фоном для текста любое изображение:

Главное — не забывать, что текст должен контрастировать с фоном, чтобы его было удобно читать.