Firefox linear gradient problem
I have a div gradient, here it is:
<div class="gradient"></div>
And here is the css:
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%)
}
Very simple. In Chrome it works fine, but in Firefox (34.0, Ubuntu 14.04) it doesn't work correctly:
I tried using rgba(0,0,0,0)
instead transparent
, tried -moz-linear-gradient
prefix - no results.
Thank!
source to share
If you want to avoid the gray in the middle, you can use a transparent white (255, 255, 255, 0)
to opaque white gradient (255, 255, 255, 1),#fff
.
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%)
}
http://dabblet.com/gist/64dd43f37e8978d08749
In your code, the gradient goes from transparent black to opaque white, and because of this, the gray part in the middle appears in FF.
I am assuming that chrome and other browser calculate color steps in a gradient differently.
source to share