To apply a gradient colour to your text, we first need to create a background gradient which includes a few properties (angle, start and finishing colours).
.text-gradient {
background: linear-gradient(45deg, #f3ec78, #af4261);
}
We then need to clip the background using the text as a clipping mask, and hide the text.
.text-gradient {
background: linear-gradient(45deg, #f3ec78, #af4261);
background-clip: text;
color: transparent;
}
We can also progressively support older browsers, by including a fallback.
/* Show a solid colour in older browsers (e.g. IE11) */
.text-gradient {
color: #f3ec78;
}
/* Show text gradient in modern browsers */
@supports (--css: variables) {
.text-gradient {
background: linear-gradient(45deg, #f3ec78, #af4261);
background-clip: text;
color: transparent;
}
}