Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="swatch-1"></div>
<div id="swatch-2"></div>
<div id="swatch-3"></div>
<div id="swatch-4"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

@import "compass";

// Faking linear gradients with box shadow.  
//   This is useful when you want to manage your gradient independent of
//   other background images.

div {
  height: 200px;
  width: 200px;
  background-color: red;
  float: left;
  margin: 20px;
}

// Add initial horixontal offset value to show where the edge is.
#swatch-1 {
  @include box-shadow(black 100px 0 0 0 inset);
}
// Add the desired amount of blur.
#swatch-2 {
  @include box-shadow(black 100px 0 200px 0 inset);
}
// Set a negative spread to remove the shadow from the vertical edges.
#swatch-3 {
  @include box-shadow(black 100px 0 200px -100px inset);
}
// Adjust the initial horizontal offset to compensate for the negative spread.
#swatch-4 {
  @include box-shadow(black 200px 0 200px -100px inset);
}
// Profit.

SassMeister-output.css

div {
  height: 200px;
  width: 200px;
  background-color: red;
  float: left;
  margin: 20px;
}

#swatch-1 {
  -moz-box-shadow: black 100px 0 0 0 inset;
  -webkit-box-shadow: black 100px 0 0 0 inset;
  box-shadow: black 100px 0 0 0 inset;
}

#swatch-2 {
  -moz-box-shadow: black 100px 0 200px 0 inset;
  -webkit-box-shadow: black 100px 0 200px 0 inset;
  box-shadow: black 100px 0 200px 0 inset;
}

#swatch-3 {
  -moz-box-shadow: black 100px 0 200px -100px inset;
  -webkit-box-shadow: black 100px 0 200px -100px inset;
  box-shadow: black 100px 0 200px -100px inset;
}

#swatch-4 {
  -moz-box-shadow: black 200px 0 200px -100px inset;
  -webkit-box-shadow: black 200px 0 200px -100px inset;
  box-shadow: black 200px 0 200px -100px inset;
}

SassMeister-rendered.html

<div id="swatch-1"></div>
<div id="swatch-2"></div>
<div id="swatch-3"></div>
<div id="swatch-4"></div>