Skip to content

Instantly share code, notes, and snippets.

@jlittlejohn
Created November 16, 2012 05:09
Show Gist options
  • Save jlittlejohn/4084309 to your computer and use it in GitHub Desktop.
Save jlittlejohn/4084309 to your computer and use it in GitHub Desktop.
SCSS: Horizontal Gradient (Mixin)
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
background-color: $endColor;
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment