Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Forked from scottkellum/Sass-gradient.sass
Created October 6, 2011 20:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save chriseppstein/1268625 to your computer and use it in GitHub Desktop.
Save chriseppstein/1268625 to your computer and use it in GitHub Desktop.
Create gradients with ease using Sass
=gradient($startcolor, $endcolor, $startpos: top)
background-color: $startcolor / 2 + $endcolor / 2
@if $startpos == "top"
filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
-ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
background-image: -webkit-gradient(linear, top left, bottom left, from($startcolor), to($endcolor))
@if $startpos == "left"
filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
-ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
background-image: -webkit-gradient(linear, top left, top right, from($startcolor), to($endcolor))
@if $startpos == "bottom"
background-image: -webkit-gradient(linear, bottom left, top left, from($startcolor), to($endcolor))
@if $startpos == "right"
background-image: -webkit-gradient(linear, top right, top left, from($startcolor), to($endcolor))
@if $startpos == "top left"
background-image: -webkit-gradient(linear, $startpos, bottom right, from($startcolor), to($endcolor))
@if $startpos == "top right"
background-image: -webkit-gradient(linear, $startpos, bottom left, from($startcolor), to($endcolor))
@if $startpos == "bottom left"
background-image: -webkit-gradient(linear, $startpos, top right, from($startcolor), to($endcolor))
@if $startpos == "bottom right"
background-image: -webkit-gradient(linear, $startpos, top left, from($startcolor), to($endcolor))
background-image: -webkit-linear-gradient($startpos, $startcolor, $endcolor)
background-image: -moz-linear-gradient($startpos, $startcolor, $endcolor)
background-image: -ms-linear-gradient($startpos, $startcolor, $endcolor)
background-image: -o-linear-gradient($startpos, $startcolor, $endcolor)
background-image: linear-gradient($startpos, $startcolor, $endcolor)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment