Get in touch

Send an email to: lammers@gmail.com.
Or find me online at: Github, X

CSS gradient text

To create text with a gradient fill in CSS, we need to set a gradient for the background property. By setting background-clip: text, the text will act as a mask and the background will only be displayed on the text itself. Finally we should set color: transparent so that only the gradient is visible.

background: #1423EB;
background: linear-gradient(to top right, #1423EB 15%, #DE2828 85%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

See MDN for more information about background-clip