Skip to content

Instantly share code, notes, and snippets.

@thom4parisot

thom4parisot/_gradients.css.scss

Forked from thbar/_gradients.css.scss
Last active July 10, 2020 14:18
Show Gist options
  • Save thom4parisot/5860036 to your computer and use it in GitHub Desktop.
Save thom4parisot/5860036 to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal Gradient Sass Mixin
Raw
_gradients.css.scss
@mixin horizontal-gradient($from, $to, $stop: 100%) {
/* fallback/image non-cover color */
background-color: $from;
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, $from 0%, $to $stop);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $from), color-stop($stop, $to));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(left, $from 0%, $to $stop);
/* Opera 11.10+ */
background-image: -o-linear-gradient(left, $from 0%, $to $stop);
/* IE10+ */
background: -ms-linear-gradient(left, $from 0%, $to $stop);
/* Standard */
background: linear-gradient(to right, $from 0%, $to $stop);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 );
}
Raw
example.css.scss
.my_div {
@include horizontal-gradient(white, transparent);
}
@joeSaad
Copy link

joeSaad commented Jul 26, 2017

👍

@chooomedia
Copy link

nice! Thanks

@mtsweir
Copy link

mtsweir commented Aug 24, 2018

Didn't work for IE6-9,

.my_div {
  @include horizontal-gradient(#71c005, #88dd06);
}

outputs...

.my_div {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 );
}

@Bodge-IT
Copy link

Bodge-IT commented Jan 24, 2019 •
edited
Loading

for those following, try
.my_div {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=1 );
}

@dwehrmann
Copy link

Thanks for the snippet!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment