To create text that has a gradient of colors i.e. hover text for links (see below as an example)
This can be create with the below code:
|
1 2 3 4 5 6 7 8 9 |
a.hover-effect{ background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71)); background: linear-gradient(90deg,#ff8a00,#e52e71); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* this is needed */ -webkit-box-decoration-break: clone; box-decoration-break: clone; text-shadow: none; } |