CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-11
Vincent
Vincent

Reputation: 113

CSS background gradient with text background-clip not working in Internet Explorer

h1 {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    text-align: center;
    letter-spacing: 0.5px;
    font-size: 2.4rem;
    background-image: -webkit-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: -moz-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: -ms-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: -o-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: linear-gradient(to right, rgb(140, 198, 63), rgb(0, 185, 245));
    background-clip: content-box;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    -moz-text-stroke-width: 2px;
    -moz-text-stroke-color: white;
    -ms-text-stroke-width: 2px;
    -ms-text-stroke-color: white;
    -o-text-stroke-width: 2px;
    -o-text-stroke-color: white;
    text-stroke-width: 2px;
    text-stroke-color: white;
}
<h1>Heading.. Appears good in Chrome but not in IE :( </h1>

Above is the HTML and CSS code. The code works good in Google Chrome. But the same code doesn't work in Internet Explorer - 10,11,Edge. I suspect the error is in background-clip. Please help.

Upvotes: 0

Views: 771

Answers (1)

Alaeddine Khelifi
Alaeddine Khelifi

Reputation: 71

The problem here is-webkit-text-stroke-width: 2px; is only supported in Edge.

IE11 and below doesn't support text-stroke and text-fill.

For further reading check this aricle.

Upvotes: 1

Related Questions