After reading the documentation, I realized that IE does not support the text value of the background-clip .

What if you need a gradient to do cross-browser?

Do the whole alphabet in Photoshop and make a sprite? The only way?

1 answer 1

I recently was interested in this issue, for example, this menu is bungled.
Look at the code, it is already compiled with all the prefixes. Specifically, I don’t know about IE in particular, but it works in Edge (and this is not the same thing?).
The code looks cumbersome due to the pseudo-element, and in html you need to add an additional attribute, but the gradient texts are not so often used, so the hack is quite usable)

 a { font: bold 18pt sans-serif; color: transparent; position: relative; } a::after { position: absolute; content: attr(data-text); left: 0; top: 0; text-fill-color: transparent; -webkit-text-fill-color: transparent; background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #FF25D6), color-stop(80%, #ba00ff)) no-repeat; background: -webkit-linear-gradient(#FF25D6 30%, #ba00ff 80%) no-repeat; background: linear-gradient(#FF25D6 30%, #ba00ff 80%) no-repeat; background-clip: text; -webkit-background-clip: text; } 
 <a data-text="My funny text :)")>My funny text :)</a>