Skip to content

Instantly share code, notes, and snippets.

@elidickinson
Forked from thbar/_gradients.css.scss
Created November 21, 2012 17:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elidickinson/4126449 to your computer and use it in GitHub Desktop.
Save elidickinson/4126449 to your computer and use it in GitHub Desktop.
SCSS mixing for CSS3 gradients
@mixin gradient($from, $to) {
background-color: $from; /* fallback/image non-cover color */
background-image: -moz-linear-gradient($from, $to); /* Firefox 3.6+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); /* Safari 4+, Chrome 1+ */
background-image: -webkit-linear-gradient($from, $to); /* Safari 5.1+, Chrome 10+ */
background-image: -o-linear-gradient($from, $to); /* Opera 11.10+ */
// extras from http://www.colorzilla.com/gradient-editor/
background: -ms-linear-gradient(top, $from 0%,$to 100%); /* IE10+ */
background: linear-gradient(to bottom, $from 0%,$to 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 ); /* IE6-9 */
}
.my_div {
@include gradient($background_color, white);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment