Текст с градиентом

Мы можем добавить фоновое изображение для текстового элемента.

Сегодня мы будем экспериментировать background-clip: text; и создадим симпатичный золотой тест, добавив CSS3 переходы.

background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit- Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.

.gold {
    background-image: linear-gradient(to right, #462523 0px, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
    box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
    color: transparent;
    font-family: "Times New Roman",serif;
    font-size: 150px;
    font-weight: bold;
   background-clip: text;
    letter-spacing: 5px;
    -webkit-background-clip: text;}