CODEWITHSUNDEEP
htmlcssmozilla
babiro
babiro

Reputation: 85

Why gradient is not working in mozilla? It works fine is chrome

I tried -moz-linear-gradient in #inner , it is not working in Mozilla.

background: -moz-linear-gradient( 
    left top, 
    right top, 
    color-stop(0%,rgba(255,255,255,1)),        
    color-stop(50%,rgba(255,255,255,0.01)), 
    color-stop(100%,rgba(255,255,255,1))
);

http://jsfiddle.net/8e45ocb7/

Upvotes: 0

Views: 85

Answers (2)

rockerest
rockerest

Reputation: 10518

Mozilla gradients don't use color-stop, and only takes a single first parameter to define the directionality of the gradient.

The following definition works for modern Mozilla browsers:

background: linear-gradient(
    to right,
    rgba(255,255,255,1),
    rgba(255,255,255,0.01),
    rgba(255,255,255,1)
);

And this one should work (untested) for older Mozilla browsers:

background: -moz-linear-gradient(
    left,
    rgba(255,255,255,1),
    rgba(255,255,255,0.01),
    rgba(255,255,255,1)
);

By the way, you should use background-image instead of background to avoid wiping out other things, and the -moz- prefix is only necessary if you're supporting moderately old (15+ versions ago) Firefox versions.

Upvotes: 1

yogesh suhagiya
yogesh suhagiya

Reputation: 498

Try following:

background-color: #49afcd;
background-image: linear-gradient(to left top, #5bc0de, #2f96b4);
background-repeat: repeat-x;

it works fine

Upvotes: 1

Related Questions