Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

40 lines (33 sloc) 1.527 kB
// Requires Sass 3.1+
@mixin linear-gradient($pos, $G1, $G2: false,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
// If $pos is missing from mixin, reassign vars and add default position
@if $pos-type == color {
$G10: $G9, $G9: $G8, $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: top; // Default position
$full: $G1;
$gradients: $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
@each $gradient in $gradients {
@if $gradient {
$full: $full, $gradient;
background-color: nth($G1, 1);
background-image: -webkit-gradient(linear, left top, left bottom, from($G1), to($G2)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient($pos, $full);
background-image: -moz-linear-gradient($pos, $full);
background-image: -ms-linear-gradient($pos, $full);
background-image: -o-linear-gradient($pos, $full);
background-image: linear-gradient($pos, $full);
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
// @include linear-gradient(#1e5799, #2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
Jump to Line
Something went wrong with that request. Please try again.