Font(text) linear-gradient in IE 10. How?

Question

Cannot get it to work in IE 10 :( I use icon from font-awesome, and trying to add linear-gradient to it.

background: linear-gradient(top right, red 0%, brown 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

All works except IE. Tried different prefixes, but as I understand I need prefix for these:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

But google says IE does not support them at all.. What can I do?

.icon {
    font-size: 400%;
}

/* Color gradient class, for card icons and titles */
.fa-gradient {

    /* old browsers */
    background: red;

    /* IE10+ */ 
    background: -ms-linear-gradient(top right, red 0%, brown 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top right, red 0%, brown 100%);

    /* Opera */ 
    background: -o-linear-gradient(top right, red 0%, brown 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);

    /* W3C Markup */ 
    background: linear-gradient(to top right, red 0%, brown 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown',GradientType=1 );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

    <i class="fa fa-calendar fa-5x fa-gradient" aria-hidden="true">
    </i>

    <i class="fa fa-users fa-5x fa-gradient" aria-hidden="true">
    </i>
</body>

CSS Gradients are only supported with IE11. See [caniuse.com](https://caniuse.com/#search=css%20gradients) for more informations — Patrick Mlr, Jan 12 '18 at 07:56
Any workaround/js polyfill? Maybe I can add selective code for IE and other browsers?.. — Gennady G, Jan 12 '18 at 08:33
You could do it with media queries. See this answer on SO for more help: [Jay Patels answer on SO](https://stackoverflow.com/a/28419263/6773269) — Patrick Mlr, Jan 12 '18 at 08:53

score 4 · Answer 1 · answered Jan 15 '18 at 12:39

Yes, thank You guys!

@media queries helped!

/* Color gradient class, for card icons and titles */
.fa-gradient {
    /* old browsers */
    background: red;
    /* IE10+ */
    background: -ms-linear-gradient(top right, red 0%, brown 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top right, red 0%, brown 100%);
    /* Opera */
    background: -o-linear-gradient(top right, red 0%, brown 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);
    /* W3C Markup */
    background: linear-gradient(top right, red 0%, brown 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown00', GradientType=1);
    /*background: linear-gradient(linear, left bottom, right top, from(brown), to(red));*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .fa-gradient {
        color: red;
        background: transparent;
    }
}

score 2 · Accepted Answer · answered Jan 12 '18 at 07:59

2

There is no way to make this work in IE10. Your only options are using an image or svg to create that icon with a gradient.

answered Jan 12 '18 at 07:59

Karsten Buckstegge

291
2
9

Can I add some code that shows this font, for example - red in IE, and gradient for other browsers? – Gennady G Jan 12 '18 at 08:11

Font(text) linear-gradient in IE 10. How?

2 Answers2