CODEWITHSUNDEEP
cssfirefoxlinear-gradients
Max Koretskyi
Max Koretskyi

Reputation: 105449

Why doesn't my linear-gradient work in Firefox?

I'm testing my application on Firefox 33. I have a simple background property defined with a gradient:

background: linear-gradient(bottom, #004771 0%, #005185 100%);

and it doesn't work. CanIUse reports that gradients on Firefox 33 can be used without a prefix. So why doesn't it work? If I add a Mozilla-specific prefix:

background: -moz-linear-gradient(bottom, #004771 0%, #005185 100%);

everything works OK.

Upvotes: 4

Views: 1507

Answers (2)

97ldave
97ldave

Reputation: 5249

You need to use to bottom in order for it to work:

background: linear-gradient(to bottom, #004771 0%, #005185 100%);

jsfiddle

Upvotes: 0

Kristian Frost
Kristian Frost

Reputation: 791

When using linear-gradient without the prefix, you need to write it like this ("to bottom" instead of "bottom"):

background: linear-gradient(to bottom, #004771 0%, #005185 100%);

EDIT: Link to documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax

Upvotes: 5

Related Questions