CODEWITHSUNDEEP
htmlcssfirefoxgradient
Evgeny Samsonov
Evgeny Samsonov

Reputation: 2750

Firefox linear-gradient issue

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: Firefox gradient screenshot

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

dabblet link

Thanks!

Upvotes: 3

Views: 245

Answers (1)

Mathias
Mathias

Reputation: 5672

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.

Upvotes: 3

Related Questions