generategrid.css

body {
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
  -moz-background-size: 100% 1.5em;
  -webkit-background-size: 100% 1.5em;
  -o-background-size: 100% 1.5em;
  background-size: 100% 1.5em;
  background-position: left top;
}
body > div {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.639%, rgba(0, 0, 0, 0)), color-stop(1.64%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(0, 0, 0, 0)), color-stop(9.837%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(0, 0, 0, 0)), color-stop(18.034%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(0, 0, 0, 0)), color-stop(26.231%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(0, 0, 0, 0)), color-stop(34.427%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(0, 0, 0, 0)), color-stop(42.624%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(0, 0, 0, 0)), color-stop(50.821%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(0, 0, 0, 0)), color-stop(59.017%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(0, 0, 0, 0)), color-stop(67.214%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(0, 0, 0, 0)), color-stop(75.411%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(0, 0, 0, 0)), color-stop(83.608%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(0, 0, 0, 0)), color-stop(91.804%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.64%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.837%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.034%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.231%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.427%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.624%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.821%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.017%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.214%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.411%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.608%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.804%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.64%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.837%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.034%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.231%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.427%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.624%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.821%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.017%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.214%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.411%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.608%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.804%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.64%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.837%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.034%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.231%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.427%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.624%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.821%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.017%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.214%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.411%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.608%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.804%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
  background-position: left top;
  width: 61em;
  margin: 0 auto;
}

generategrid.scss

@import compass;

// Default Settings ----------------------------------------------------------

$grid-background-column-color     : rgba(100, 100, 225, 0.25)   !default;
$grid-background-gutter-color     : rgba(0, 0, 0, 0)            !default;

$grid-background-total-columns    : 12                          !default;
$grid-background-column-width     : 4em                         !default;
$grid-background-gutter-width     : 1em                         !default;
$grid-background-start-offset     : 1em                         !default;

$grid-background-baseline-color   : rgba(0, 0, 0, 0.5)          !default;
$grid-background-baseline-height  : 1.5em                       !default;

// Functions -----------------------------------------------------------------

// crete the gradient needed for baseline grids
@function get-baseline-gradient(
  $color : $grid-background-baseline-color
) {
  $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%, rgba($color,0) 100%);
  @return $gradient;
}

// crete the gradient needed for horizontal grids
@function get-column-gradient(
  $total          : $grid-background-total-columns,
  $column         : $grid-background-column-width,
  $gutter         : $grid-background-gutter-width,
  $offset         : $grid-background-start-offset,
  $column-color   : $grid-background-column-color,
  $gutter-color   : $grid-background-gutter-color
) {
  // in order to support webkit we need to determine all our color-stops as percent-values.
  // to know the percent-width of a column or gutter we need to know the context for it.
  // the context is equal to the total columns, plus their intervening gutters, plus an offset on either side.
  $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));
  $offset-percent: $offset / $context * 100%;
  $column-percent: $column / $context * 100%;
  $gutter-percent: $gutter / $context * 100%;

  $grid: compact();
  $grid: append($grid, $gutter-color $offset-percent, comma);

  // for each column/gutter pair, we determine the needed color-stops
  @for $i from 0 to $total {

    // $a represents the start of this column, initially equal to the offset
    $a: $offset-percent;
    @if $i > 0 {
      $a: $a + (($column-percent + $gutter-percent) * $i);
    }

    // $g represents the start of this gutter, equal to $a plus one column-width
    $g: $a + $column-percent;

    // $z represents the end of a gutter, equal to $g plus one gutter-width
    $z: $g + $gutter-percent;

    // the final end-point must always equal 100%
    @if $i == ($total - 1) {
      $z: 100%;
    }

    // this little hack reassures compass that each color-stop really is farther along than the last.
    $a: $a + .001;

    // and we add this column/gutter pair to our grid
    $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z));
  }

  // return the horizontal grid as a gradient
  $gradient: linear-gradient(left, $grid);
  @return $gradient;
}

// Mixins --------------------------------------------------------------------

// add just the baseline grid to an element's background
@mixin baseline-grid-background(
  $baseline : $grid-background-baseline-height,
  $color    : $grid-background-baseline-color
) {
  @include background-image(get-baseline-gradient($color));
  @include background-size(100% $baseline);
  background-position: left top;
}

// add just the horizontal grid to an element's background
@mixin column-grid-background(
  $total          : $grid-background-total-columns,
  $column         : $grid-background-column-width,
  $gutter         : $grid-background-gutter-width,
  $offset         : $grid-background-start-offset,
  $column-color   : $grid-background-column-color,
  $gutter-color   : $grid-background-gutter-color
) {
  @include background-image(get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color));
  background-position: left top;
}

// add both horizontal and baseline grids to an element's background
@mixin grid-background(
  $total          : $grid-background-total-columns,
  $column         : $grid-background-column-width,
  $gutter         : $grid-background-gutter-width,
  $baseline       : $grid-background-baseline-height,
  $offset         : $grid-background-start-offset,
  $column-color   : $grid-background-column-color,
  $gutter-color   : $grid-background-gutter-color,
  $baseline-color : $grid-background-baseline-color
) {
  @include background-image(
    get-baseline-gradient($baseline-color),
    get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color)
  );
  @include background-size("100% #{$baseline}, auto");
  background-position: left top;
}

// Test It --------------------------------------------------------------------

body {
  @include baseline-grid-background;
  > div {
    @include column-grid-background;
    width: 61em;
    margin: 0 auto;
  }
}

index.html

<!DOCTYPE html>  
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Test Generation of CSS Gradient Grid</title>
  <meta name="description" content="">
  <meta name="author" content="Divya Manian">
  <link rel="stylesheet" href="generategrid.css">
</head>

<body>
  <div>
    <h1>Vertical Rhythms with gradients!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci lacus, pellentesque at accumsan ut, convallis nec velit. Aenean elit felis, convallis sit amet iaculis in, porttitor id justo. Aenean ornare quam eget nisi facilisis fringilla congue velit euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque aliquet lacinia elit et vulputate. Sed velit augue, ultrices nec sodales sit amet, sodales eu lectus. Nunc ornare mollis pretium.</p>
    <h2>Second Title</h2>
    <p> Phasellus tempor tortor vel mauris elementum faucibus sollicitudin augue tempor. Cras quam leo, scelerisque vitae dictum eget, dictum in ipsum. Aliquam ut neque est, sit amet ultricies ante. Morbi eleifend ullamcorper lorem, eget euismod tellus cursus in. Proin tristique facilisis urna, nec ultricies est lacinia ut. Morbi eu diam et urna semper consequat. Cras consequat commodo nunc in tempus. Mauris urna arcu, cursus nec eleifend at, lacinia sed sem. Sed consequat tortor sed neque semper et suscipit sapien interdum. In hac habitasse platea dictumst.</p>
  </div>
</body>
</html>