1

I used css3please to generate a top-to-bottom linear gradient rule that would work across all browsers that support this style and it gave me:

.box_gradient {
  background-color: #75A319;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#75A319), to(#9FCC1D)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #75A319, #9FCC1D); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #75A319, #9FCC1D); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #75A319, #9FCC1D); /* IE10 */
  background-image:      -o-linear-gradient(top, #75A319, #9FCC1D); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #75A319, #9FCC1D);
}

I'm a little suspicious of the last rule in this class:

  background-image: linear-gradient(to bottom, #75A319, #9FCC1D);

Intuitively, one would expect:

  background-image: linear-gradient(top bottom, #75A319, #9FCC1D);

Can someone confirm or allay my suspicions?

1 Answer 1

3

MDN explains the linear-gradient property here: https://developer.mozilla.org/en/CSS/linear-gradient

What you got from css3please is correct. to bottom specifies the angle. In this case, the angle is 180deg.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.