Gradient Position is optional, default is top
. Position can be a degree (90deg
). Mixin supports up to 10 color-stops.
This mixin will output a fallback background-color: #first-color;
declaration. A $fallback
argument can be passed to change the fallback color.
{% highlight scss %}
@include linear-gradient(#1e5799, #2989d8);
@include linear-gradient(top, #8fdce5, #3dc3d1);
@include linear-gradient(top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
{% endhighlight %}
Optional variables can be passed to control the deprecated -webkit-gradient()
function (iOS 4):
$deprecated-pos1
, $deprecated-pos2
{% highlight scss %}
@include linear-gradient(#1e5799, #3dc3d1, $deprecated-pos1: left center, $deprecated-pos2: left top);
{% endhighlight %}
Demo