Частенько, при верстке макета дизайнер заливает текст не сплошным цветом, а, к примеру, градиентом. При этом, у новичков часто возникает вопрос: а как это можно сверстать, каким способом? 🤔
В данном примере, заливка будет выполнена в стиле золотого градиента.
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;
}