=linear-gradient($color-stops, $start: top, $image: false)
  // Firefox's gradient api is nice.
  // Webkit's gradient api sucks -- hence these backflips:
  $background: unquote("")
  @if $image
    $background: $image + unquote(", ")
  $start: unquote($start)
  $end: opposite-position($start)
  @if $experimental-support-for-webkit
    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops))
  @if $experimental-support-for-mozilla
    background-image: #{$background}-moz-linear-gradient($start, $color-stops)
  background-image: #{$background}linear-gradient($start, $color-stops)

@mixin linear-gradient($color-stops, $start: top, $image: false) {
  // Firefox's gradient api is nice.
  // Webkit's gradient api sucks -- hence these backflips:
  $background: unquote("");
  @if $image {
    $background: $image + unquote(", "); }
  $start: unquote($start);
  $end: opposite-position($start);
  @if $experimental-support-for-webkit {
    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops)); }
  @if $experimental-support-for-mozilla {
    background-image: #{$background}-moz-linear-gradient($start, $color-stops); }
  background-image: #{$background}linear-gradient($start, $color-stops); }

This yields a linear gradient spanning from top to bottom

+linear-gradient(color-stops(white, black))

This yields a linear gradient spanning from bottom to top

+linear-gradient(color-stops(white, black), bottom)

This yields a linear gradient spanning from left to right

+linear-gradient(color-stops(white, black), left)

This yields a linear gradient starting at white passing thru blue at 33% down and then to black

+linear-gradient(color-stops(white, blue 33%, black))

This yields a linear gradient starting at white passing thru blue at 33% down and then to black at 67% until the end

+linear-gradient(color-stops(white, blue 33%, black 67%))

This yields a linear gradient on top of a background image

+linear-gradient(color_stops(white,black), top, image-url('noise.png'))

Browsers Supported:

• Chrome
• Safari
• Firefox 3.6

=radial-gradient($color-stops, $center-position: center center, $image: false)
  $center-position: unquote($center-position)
  $end-pos: grad-end-position($color-stops, true)
  $background: unquote("")
  @if $image
    $background: $image + unquote(", ")
  @if $experimental-support-for-webkit
    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops))
  @if $experimental-support-for-mozilla
    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops)
  background-image: #{$background}radial-gradient($center-position, circle, $color-stops)

@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
  $center-position: unquote($center-position);
  $end-pos: grad-end-position($color-stops, true);
  $background: unquote("");
  @if $image {
    $background: $image + unquote(", "); }
  @if $experimental-support-for-webkit {
    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops)); }
  @if $experimental-support-for-mozilla {
    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops); }
  background-image: #{$background}radial-gradient($center-position, circle, $color-stops); }

Due to limitation’s of webkit, the radial gradient mixin works best if you use pixel-based color stops.

Examples:

// Defaults to a centered, 100px radius gradient
+radial-gradient(color-stops(#c00, #00c))
// 100px radius gradient in the top left corner
+radial-gradient(color-stops(#c00, #00c), top left)
// Three colors, ending at 50px and passing thru #fff at 25px
+radial-gradient(color-stops(#c00, #fff, #00c 50px))
// a background image on top of the gradient
// Requires an image with an alpha-layer.
+radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))

Browsers Supported:

• Chrome
• Safari
• Firefox 3.6