CODEWITHSUNDEEP
css
Dónal
Dónal

Reputation: 187529

cross-browser linear gradient rule

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?

Upvotes: 1

Views: 832

Answers (1)

Nick Beranek
Nick Beranek

Reputation: 2751

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.

Upvotes: 3

Related Questions