I recently developed a text gradient class that looks great in Google Chrome but unfortunately doesn't display correctly in Firefox and Internet Explorer. In these browsers, there is a visible background gradient behind the text which is not the desired effect.
To showcase this browser-specific behavior, I have created a fiddle that can be accessed here:
https://jsfiddle.net/Lzhvsowq/
<h1 class="gradient_blue" style="font-size: 60px;">Lorem Ipsum Lorem Ipsum</h1>
.gradient_blue {
color: #288cc7;
display: inline-block;
background-color: #288cc7;
background-image: -webkit-linear-gradient(left, #288cc7 0%, #206e9b 100%);
background-image: -o-linear-gradient(left, #288cc7 0%, #206e9b 100%);
background-image: linear-gradient(to right, #288cc7 0%, #206e9b 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#288cc7', endColorstr='#206e9b', GradientType=1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Any suggestions or assistance on how to fix this issue would be greatly appreciated!