Skip to content

Instantly share code, notes, and snippets.

@imathis
Created September 21, 2010 21:12
Show Gist options
  • Save imathis/590559 to your computer and use it in GitHub Desktop.
Save imathis/590559 to your computer and use it in GitHub Desktop.
// Create a simple top to bottom linear gradient with a background-color backup
// The first argument, $color will be output as background-color: $color
//
// This yields a gradient that is 5% brighter on the top and 5% darker on the bottom
//
// +gradient-bg(#777)
//
// This yeilds a gradient where the bright and dark colors are shifted 10% from the original color.
// If you don't specify a third argument it will assign this value for the darkness too, keeping the gradient even.
//
// +gradient-bg(#777, 10)
//
// You can also pass a invert the gradient (dark color on top) by passing a negative number for $top
//
// +gradient-bg(#777, -10)
//
// This yeilds a gradient where the top is bright but the bottom is the same as the $color provided
//
// +gradient-bg(#777, 8, 0)
=gradient-bg($color, $top: 5, $bottom: $top)
@if $top < 0 and $bottom < 0
$color1: darken($color, abs($top))
$color2: lighten($color, abs($bottom))
+linear-gradient(color-stops($color1, $color2))
@else
$color1: lighten($color, abs($top))
$color2: darken($color, abs($bottom))
+linear-gradient(color-stops($color1, $color2))
background-color: $color
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment