Firefox linear-gradient issue

Question

I've got a gradient div, here it is:

<div class="gradient"></div>

And here is css:

.gradient {
    width: 20px;
    height: 20px;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%)
}

Very simple. In Chrome it's works fine, but in Firefox (34.0, Ubuntu 14.04) it's work not correctly:

I tried use rgba(0,0,0,0) instead transparent , tried -moz-linear-gradient prefix — no results.

dabblet link

Thanks!

Answer 1

If you want to avoid the grey in the middle you can use a gradient from transparent white (255, 255, 255, 0) to opaque white (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 that the grey part in the middle shows up in FF.

I guess chrome and other browser calculate the color steps in the gradient differently.