Золотой цвет для html-текста CSS эффект

Частенько, при верстке макета дизайнер заливает текст не сплошным цветом, а, к примеру, градиентом. При этом, у новичков часто возникает вопрос: а как это можно сверстать, каким способом? 🤔

В данном примере, заливка будет выполнена в стиле золотого градиента.

HTML

<span>gold</span>

CSS

span {
  text-transform: uppercase;
  color: transparent;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 150px;
  font-family: 'Times New Roman', serif;
  letter-spacing: 5px;
  font-weight: bold;
  background-image: linear-gradient(to right, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
  -webkit-background-clip: text;
}

Оцените статью
( 1 оценка, среднее 5 из 5 )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий