generategrid.css

body > div {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, 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))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0px, rgba(0, 0, 0, 0)), color-stop(0px, rgba(0, 0, 0, 0.25)), color-stop(40px, rgba(0, 0, 0, 0)), color-stop(50px, rgba(0, 0, 0, 0)), color-stop(60px, rgba(0, 0, 0, 0.25)), color-stop(100px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0.25)), color-stop(150px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0.25)), color-stop(200px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0.25)), color-stop(250px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0.25)), color-stop(300px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0.25)), color-stop(350px, rgba(0, 0, 0, 0)), color-stop(360px, rgba(0, 0, 0, 0)), color-stop(360px, rgba(0, 0, 0, 0.25)), color-stop(400px, rgba(0, 0, 0, 0)), color-stop(410px, rgba(0, 0, 0, 0)), color-stop(410px, rgba(0, 0, 0, 0.25)), color-stop(450px, rgba(0, 0, 0, 0)), color-stop(460px, rgba(0, 0, 0, 0)), color-stop(460px, rgba(0, 0, 0, 0.25)), color-stop(500px, rgba(0, 0, 0, 0)), color-stop(510px, rgba(0, 0, 0, 0)), color-stop(510px, rgba(0, 0, 0, 0.25)), color-stop(550px, rgba(0, 0, 0, 0)), color-stop(560px, rgba(0, 0, 0, 0)), color-stop(560px, rgba(0, 0, 0, 0.25)), color-stop(600px, rgba(0, 0, 0, 0)), color-stop(610px, rgba(0, 0, 0, 0)), color-stop(610px, rgba(0, 0, 0, 0.25)), color-stop(650px, rgba(0, 0, 0, 0)), color-stop(660px, rgba(0, 0, 0, 0)), color-stop(660px, rgba(0, 0, 0, 0.25)), color-stop(700px, rgba(0, 0, 0, 0)), color-stop(710px, rgba(0, 0, 0, 0)), color-stop(710px, rgba(0, 0, 0, 0.25)), color-stop(750px, rgba(0, 0, 0, 0)), color-stop(760px, rgba(0, 0, 0, 0)), color-stop(760px, rgba(0, 0, 0, 0.25)), color-stop(800px, rgba(0, 0, 0, 0)), color-stop(810px, rgba(0, 0, 0, 0)), color-stop(810px, rgba(0, 0, 0, 0.25)), color-stop(850px, rgba(0, 0, 0, 0)), color-stop(860px, rgba(0, 0, 0, 0)), color-stop(860px, rgba(0, 0, 0, 0.25)), color-stop(900px, rgba(0, 0, 0, 0)), color-stop(910px, rgba(0, 0, 0, 0)), color-stop(910px, rgba(0, 0, 0, 0.25)), color-stop(950px, rgba(0, 0, 0, 0)), color-stop(960px, rgba(0, 0, 0, 0)), color-stop(960px, rgba(0, 0, 0, 0.25)), color-stop(1000px, rgba(0, 0, 0, 0)), color-stop(1010px, rgba(0, 0, 0, 0)), color-stop(1010px, rgba(0, 0, 0, 0.25)), color-stop(1050px, rgba(0, 0, 0, 0)), color-stop(1060px, rgba(0, 0, 0, 0)), color-stop(1060px, rgba(0, 0, 0, 0.25)), color-stop(1100px, rgba(0, 0, 0, 0)), color-stop(1110px, rgba(0, 0, 0, 0)), color-stop(1110px, rgba(0, 0, 0, 0.25)), color-stop(1150px, rgba(0, 0, 0, 0)), color-stop(1160px, rgba(0, 0, 0, 0)), color-stop(1160px, rgba(0, 0, 0, 0.25)), color-stop(1200px, rgba(0, 0, 0, 0)), color-stop(1210px, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0.25) 60px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0.25) 110px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(0, 0, 0, 0.25) 160px, rgba(0, 0, 0, 0) 200px, rgba(0, 0, 0, 0) 210px, rgba(0, 0, 0, 0.25) 210px, rgba(0, 0, 0, 0) 250px, rgba(0, 0, 0, 0) 260px, rgba(0, 0, 0, 0.25) 260px, rgba(0, 0, 0, 0) 300px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0.25) 310px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(0, 0, 0, 0.25) 360px, rgba(0, 0, 0, 0) 400px, rgba(0, 0, 0, 0) 410px, rgba(0, 0, 0, 0.25) 410px, rgba(0, 0, 0, 0) 450px, rgba(0, 0, 0, 0) 460px, rgba(0, 0, 0, 0.25) 460px, rgba(0, 0, 0, 0) 500px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0.25) 510px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(0, 0, 0, 0.25) 560px, rgba(0, 0, 0, 0) 600px, rgba(0, 0, 0, 0) 610px, rgba(0, 0, 0, 0.25) 610px, rgba(0, 0, 0, 0) 650px, rgba(0, 0, 0, 0) 660px, rgba(0, 0, 0, 0.25) 660px, rgba(0, 0, 0, 0) 700px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0.25) 710px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(0, 0, 0, 0.25) 760px, rgba(0, 0, 0, 0) 800px, rgba(0, 0, 0, 0) 810px, rgba(0, 0, 0, 0.25) 810px, rgba(0, 0, 0, 0) 850px, rgba(0, 0, 0, 0) 860px, rgba(0, 0, 0, 0.25) 860px, rgba(0, 0, 0, 0) 900px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0.25) 910px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px, rgba(0, 0, 0, 0.25) 960px, rgba(0, 0, 0, 0) 1000px, rgba(0, 0, 0, 0) 1010px, rgba(0, 0, 0, 0.25) 1010px, rgba(0, 0, 0, 0) 1050px, rgba(0, 0, 0, 0) 1060px, rgba(0, 0, 0, 0.25) 1060px, rgba(0, 0, 0, 0) 1100px, rgba(0, 0, 0, 0) 1110px, rgba(0, 0, 0, 0.25) 1110px, rgba(0, 0, 0, 0) 1150px, rgba(0, 0, 0, 0) 1160px, rgba(0, 0, 0, 0.25) 1160px, rgba(0, 0, 0, 0) 1200px, rgba(0, 0, 0, 0) 1210px, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0.25) 60px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0.25) 110px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(0, 0, 0, 0.25) 160px, rgba(0, 0, 0, 0) 200px, rgba(0, 0, 0, 0) 210px, rgba(0, 0, 0, 0.25) 210px, rgba(0, 0, 0, 0) 250px, rgba(0, 0, 0, 0) 260px, rgba(0, 0, 0, 0.25) 260px, rgba(0, 0, 0, 0) 300px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0.25) 310px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(0, 0, 0, 0.25) 360px, rgba(0, 0, 0, 0) 400px, rgba(0, 0, 0, 0) 410px, rgba(0, 0, 0, 0.25) 410px, rgba(0, 0, 0, 0) 450px, rgba(0, 0, 0, 0) 460px, rgba(0, 0, 0, 0.25) 460px, rgba(0, 0, 0, 0) 500px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0.25) 510px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(0, 0, 0, 0.25) 560px, rgba(0, 0, 0, 0) 600px, rgba(0, 0, 0, 0) 610px, rgba(0, 0, 0, 0.25) 610px, rgba(0, 0, 0, 0) 650px, rgba(0, 0, 0, 0) 660px, rgba(0, 0, 0, 0.25) 660px, rgba(0, 0, 0, 0) 700px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0.25) 710px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(0, 0, 0, 0.25) 760px, rgba(0, 0, 0, 0) 800px, rgba(0, 0, 0, 0) 810px, rgba(0, 0, 0, 0.25) 810px, rgba(0, 0, 0, 0) 850px, rgba(0, 0, 0, 0) 860px, rgba(0, 0, 0, 0.25) 860px, rgba(0, 0, 0, 0) 900px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0.25) 910px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px, rgba(0, 0, 0, 0.25) 960px, rgba(0, 0, 0, 0) 1000px, rgba(0, 0, 0, 0) 1010px, rgba(0, 0, 0, 0.25) 1010px, rgba(0, 0, 0, 0) 1050px, rgba(0, 0, 0, 0) 1060px, rgba(0, 0, 0, 0.25) 1060px, rgba(0, 0, 0, 0) 1100px, rgba(0, 0, 0, 0) 1110px, rgba(0, 0, 0, 0.25) 1110px, rgba(0, 0, 0, 0) 1150px, rgba(0, 0, 0, 0) 1160px, rgba(0, 0, 0, 0.25) 1160px, rgba(0, 0, 0, 0) 1200px, rgba(0, 0, 0, 0) 1210px, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%), linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0.25) 60px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0.25) 110px, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 0) 160px, rgba(0, 0, 0, 0.25) 160px, rgba(0, 0, 0, 0) 200px, rgba(0, 0, 0, 0) 210px, rgba(0, 0, 0, 0.25) 210px, rgba(0, 0, 0, 0) 250px, rgba(0, 0, 0, 0) 260px, rgba(0, 0, 0, 0.25) 260px, rgba(0, 0, 0, 0) 300px, rgba(0, 0, 0, 0) 310px, rgba(0, 0, 0, 0.25) 310px, rgba(0, 0, 0, 0) 350px, rgba(0, 0, 0, 0) 360px, rgba(0, 0, 0, 0.25) 360px, rgba(0, 0, 0, 0) 400px, rgba(0, 0, 0, 0) 410px, rgba(0, 0, 0, 0.25) 410px, rgba(0, 0, 0, 0) 450px, rgba(0, 0, 0, 0) 460px, rgba(0, 0, 0, 0.25) 460px, rgba(0, 0, 0, 0) 500px, rgba(0, 0, 0, 0) 510px, rgba(0, 0, 0, 0.25) 510px, rgba(0, 0, 0, 0) 550px, rgba(0, 0, 0, 0) 560px, rgba(0, 0, 0, 0.25) 560px, rgba(0, 0, 0, 0) 600px, rgba(0, 0, 0, 0) 610px, rgba(0, 0, 0, 0.25) 610px, rgba(0, 0, 0, 0) 650px, rgba(0, 0, 0, 0) 660px, rgba(0, 0, 0, 0.25) 660px, rgba(0, 0, 0, 0) 700px, rgba(0, 0, 0, 0) 710px, rgba(0, 0, 0, 0.25) 710px, rgba(0, 0, 0, 0) 750px, rgba(0, 0, 0, 0) 760px, rgba(0, 0, 0, 0.25) 760px, rgba(0, 0, 0, 0) 800px, rgba(0, 0, 0, 0) 810px, rgba(0, 0, 0, 0.25) 810px, rgba(0, 0, 0, 0) 850px, rgba(0, 0, 0, 0) 860px, rgba(0, 0, 0, 0.25) 860px, rgba(0, 0, 0, 0) 900px, rgba(0, 0, 0, 0) 910px, rgba(0, 0, 0, 0.25) 910px, rgba(0, 0, 0, 0) 950px, rgba(0, 0, 0, 0) 960px, rgba(0, 0, 0, 0.25) 960px, rgba(0, 0, 0, 0) 1000px, rgba(0, 0, 0, 0) 1010px, rgba(0, 0, 0, 0.25) 1010px, rgba(0, 0, 0, 0) 1050px, rgba(0, 0, 0, 0) 1060px, rgba(0, 0, 0, 0.25) 1060px, rgba(0, 0, 0, 0) 1100px, rgba(0, 0, 0, 0) 1110px, rgba(0, 0, 0, 0.25) 1110px, rgba(0, 0, 0, 0) 1150px, rgba(0, 0, 0, 0) 1160px, rgba(0, 0, 0, 0.25) 1160px, rgba(0, 0, 0, 0) 1200px, rgba(0, 0, 0, 0) 1210px, rgba(0, 0, 0, 0) 100%);
  -moz-background-size: 100% 16px, auto;
  -webkit-background-size: 100% 16px, auto;
  -o-background-size: 100% 16px, auto;
  background-size: 100% 16px, auto;
  background-position: left top, left top; }

generategrid.sass

@import compass

=grid-background($total-cols: 24, $col-width: 40px, $gutter-width: 10px, $vertical-rhythm: 16px, $start-offset: 0px)
  $gutter-color: rgba(0,0,0,0)
  $column-color: rgba(0,0,0,.25)
  $grid: compact()
  $grid: append($grid, $gutter-color $start-offset, comma)

  $c: $total-cols
  @for $i from 0 to $c
    $a: $start-offset
    @if $i > 0
      $a: $a + (($col-width + $gutter-width) * $i) + $gutter-width
    $g: $a + $col-width
    $z: $g + $gutter-width
    $grid: join($grid, ($column-color $a, $gutter-color $g, $gutter-color $z))
  
  $grid: append($grid, $gutter-color 100%)
  +background-image(linear-gradient(top, rgba(0,0,0,.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%), linear-gradient(left, $grid))
  +background-size("100% #{$vertical-rhythm}, auto")
  background-position: left top, left top

// test it
body > div
  +grid-background

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>