BTB BTB - 4 years ago 86
CSS Question

CCS3 linear-gradient issues with different browsers

I'm trying to add an transparent linear-gradient to a div, and making it work in different browsers seems to be not so easy.

background-image:-moz-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-webkit-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-o-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image:-ms-linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);
background-image: linear-gradient(left center , $secondary-color, rgba(255, 82, 66, 0) 52%);


This doesn't work in any browser at all. If I remove all lines except the
-moz-linear-gradient
, it works in Firefox. How come?

The error message is "Invalid property value". But as it works with only the
-moz-
vendor presented, I think the values should be good?

Answer Source

They don't work because everything other than your -moz-linear-gradient syntax is incorrect. The correct syntax for the others is provided in the below snippet for your reference. (Replace the red with your $secondary-color.)

  • The -webkit-linear-gradient syntax is supporting the two side syntax but looks like center is not an allowed value. So, for example, left top or left bottom as first parameter will result in a diagonal gradient but left center produces no output.
  • The standard linear-gradient property doesn't use side side as first parameter. It uses to [side] [side] as the first parameter. So, a diagonal gradient to would be like to left top or to left bottom whereas a horizontal gradient would be to left or to right.

Even as per MDN, the center is not a valid value for the -moz-linear-gradient function and so its a surprise that Firefox is able to work with that value. Maybe, it just ignores the invalid value whereas the other browsers ignore the whole property + value.

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

body{
  min-height: 100vh;
  background-image: -webkit-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%);
  background-image: -moz-linear-gradient(left center, red, rgba(255, 82, 66, 0) 52%);
  background-image: -o-linear-gradient(left, red, rgba(255, 82, 66, 0) 52%);
  background-image: linear-gradient(to right, red, rgba(255, 82, 66, 0) 52%);
}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download