CSS not working in Firefox but works in Chrome

Question

The following code works in Chrome, but fails in Firefox. This style blinks the success message.

.rainbow {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<div class="rainbow">Success</div>

Though the linked question refers to the `-moz` prefixed version, the answer is all the same. `background-clip` is a standard property but the value `text` is not. It is a Webkit specific option and so won't work in other browsers. — Harry, Apr 15 '16 at 08:24

score 1 · Answer 1 · answered Apr 15 '16 at 08:02

1

i think for firefox support u need to write something like this.

div {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

<div>A rainbow made from a gradient</div>

see here for more

for making gradient colors i always use this tool

answered Apr 15 '16 at 08:02

Ismail Farooq

6,309
1
27
47

1

Op wants to use rainbow text rather then text in rainbow box.. please don't change the moto/aim of question.. thanx – Leo the lion Apr 15 '16 at 08:04

E.Agolli · Answer 2 · 2016-04-15T08:22:09.707

0

Better use this tool to generate the gradient you want because the way you have used it its not recognized by mozilla.

While background-clip: text; will not work on mozilla because i doesnt exists.

edited Apr 15 '16 at 08:22

answered Apr 15 '16 at 08:06

E.Agolli

552
2
11

Well, please check your own code before posting as answer as its not working.. – Leo the lion Apr 15 '16 at 08:09
@Leothelion did you tried and didnt work for you ? – E.Agolli Apr 15 '16 at 08:12
yes please..check in ff and you will see – Leo the lion Apr 15 '16 at 08:13

CSS not working in Firefox but works in Chrome

2 Answers2