Search code examples
csslinear-gradientsvendor-prefix

Linear-gradient works only with -moz vendor prefix

Since this code works with the -moz vendor prefix I thought it would work a well with -webkit or -ms for instance, but it doesn't seem to allow it:

background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);

I guess Mozilla is allowing something that shouldn't be used, but my research has been infructuous as of now...

Any idea?

Solution

  • Remove the center. Then it should work.

    Also make sure you have it for all browsers:

    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);

    Example Fiddle