Why Clip-path, perspective & linear-gradient on font not works on IE11 / Edge

Question

I'm trying to make some polygon, rotate animation effect and gradient on fonts. Chrome and Firefox works fine but internet explorer 11 not working properly. I'm Working on SASS. I've done some research tried some example but non of that worked. I've having certain issue on IE/11.

• Prospective property (Included prefix /
  not working)

• clip-path: polygon not working

• linear-gradient not working on font

  display: inline-block;
  background-image: linear-gradient(to right top, #bd74c2, #69306D);
  -webkit-background-clip: text;
  -ms-background-clip: text;
  

Here is my code JSFiddle

In my research it says some of this property will work on IE10+ but im having issue on IE11. Is there another way to work on these property's.

Answer 1

The problem on IE11 is that -ms-background-clip: text wont work. More info can be found on the caniuse website:

Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)

Ref: https://caniuse.com/#search=background-clip

Your options on IE11 would be for your font to fall back to a flat colour (graceful degradation), Using an svg instead as DayOne suggested or to replace the text with an image on that browser (seriously old-school)