Skip to content

Instantly share code, notes, and snippets.

@jbrz0
Last active April 17, 2020 18:14
Show Gist options
  • Save jbrz0/5a1dd17d09cb1ee6f9c6a22ea178a09b to your computer and use it in GitHub Desktop.
Save jbrz0/5a1dd17d09cb1ee6f9c6a22ea178a09b to your computer and use it in GitHub Desktop.
Sass mixin for quickly adding gradients
@mixin background-gradient($start-color, $end-color, $orientation) {
background: $start-color;
@if $orientation == 'vertical' {
background: -webkit-linear-gradient(top, $start-color, $end-color);
background: linear-gradient(to bottom, $start-color, $end-color);
} @else if $orientation == 'horizontal' {
background: -webkit-linear-gradient(left, $start-color, $end-color);
background: linear-gradient(to right, $start-color, $end-color);
} @else {
background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
background: radial-gradient(ellipse at center, $start-color, $end-color);
}
}
//Usage:
//$start-color, $end-color, $orientation - vertical/horizontal/radial
.foo {
@include background-gradient(red, black, 'vertical');
}
//Output
.foo {
background: -webkit-linear-gradient(top, red, black);
background: linear-gradient(to bottom, red, black);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment