Geek Answers Handbook

CSS does not work in Firefox, but works in Chrome

The following code works in Chrome, but does not work in Firefox. This style flashes 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>
Run codeHide result
+4
source share
2 answers

I think you need to write something like this to support firefox.

div {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
<div>A rainbow made from a gradient</div>
Run codeHide result

see here for more

to create gradient colors i always use this tool

+1
source

It is better to use this tool to generate the desired gradient, because the way you used it is not recognized by mozilla.

background-clip: text; mozilla, doesnt .

0

More articles:


All Articles