0

I created a gradient class for text. It works nicely in google chrome but in firefox and internet explorer it doesn't. In these browsers there is an actual background gradient visible behind the text which I don't want.

I created a fiddle where this browser-different behavior can be perceived.

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 help appreciated!

rails_has_elegance
  • 1,590
  • 4
  • 21
  • 37
  • 1
    transparent?? https://jsfiddle.net/Lzhvsowq/5/ – Leo the lion Apr 22 '16 at 10:56
  • Should i post it as answer? – Leo the lion Apr 22 '16 at 11:54
  • @rails_has-elegance sorry but i have removed my answer as transparent means no use of gradient. You won't get gradient in chrome after use transparent and it will lead to wrong way to new user so sorry. – Leo the lion Apr 22 '16 at 12:29
  • oh i completely misinterpreted your answer. it actually does not work, you're right. you removed the gradients alltogether. any other solution possible? – rails_has_elegance Apr 22 '16 at 12:57
  • as far as i know..sorry.. but hope you will get some one :) – Leo the lion Apr 22 '16 at 13:00
  • The effect in question comes from the `background-clip` property and its value `text`. As mentioned [here](http://stackoverflow.com/a/9371581/2851870), the `text` property is not a standard CSS property and is a proprietary WebKit feature. – Tasos K. Apr 24 '16 at 10:41

2 Answers2

1

You are using WebKit only features, such as -webkit-background-clip: text, and this is why it is going to work only on Chrome, Safari and Opera. Unfortunately, it doesn't look like there is a similar feature for IE or Firefox.

Probably the best alternative for non-WebKit browsers if you want to make a text gradient is to use SVG gradients (jsfiddle here): 

<h1 class="gradient_blue" style="font-size: 60px;">
<svg height="100%" width="100%">
      <defs>
        <linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="0%">
          <stop offset="0%" style="stop-color:#288cc7;" />
          <stop offset="100%" style="stop-color:#206e9b;" />
        </linearGradient>
      </defs>
      <text fill="url(#gradient)" x="1%" y="30%">
         Lorem Ipsum Lorem Ipsum
      </text>
 </svg>
 </h1>
Tomer
  • 3,149
  • 23
  • 26
1

You are using two webkit extension properties:

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

Sadly it's too late to kill them, so Compatibility spec has standardized them.

Now non-webkit browsers are implementing them, but they are not yet supported in stable channels.

In the case of Firefox, it works in latest Nightly. Relevant bugs are:

  • Bug 1247777 - Implement the -webkit-text-fill-color property
  • Bug 1263516 - Enable background-clip:text preference in non-release builds
  • Bug 759568 - Implement -webkit-background-clip: text (as background-clip: text)

So just wait. Or better, don't use these properties which should never have existed.

Oriol
  • 274,082
  • 63
  • 437
  • 513