<p>
  this box has no gradients
</p>
<div class='gradient-example'></div>
<p>
  This will yield a radial gradient with an apparent specular highlight
</p>
<div class='gradient-example' id='radial-gradient'></div>
<p>
  This yields a linear gradient spanning from $start to $end coordinates
</p>
<div class='gradient-example' id='linear-gradient'></div>
<p>
  This yields a gradient starting at the top with #fff, ending in #aaa
</p>
<div class='gradient-example' id='v-gradient'></div>
<p>
  Same as above but with a #ccc at the halfway point
</p>
<div class='gradient-example' id='v-gradient-2'></div>
<p>
  Same as the first example but with #ccc at the
  30% from the top, and #bbb at 70% from the top
</p>
<div class='gradient-example' id='v-gradient-3'></div>
<p>
  This yields a horizontal linear gradient spanning from left to right.
</p>
<div class='gradient-example' id='h-gradient'></div>

%p
  this box has no gradients
.gradient-example
%p
  This will yield a radial gradient with an apparent specular highlight  
#radial-gradient.gradient-example
%p
  This yields a linear gradient spanning from $start to $end coordinates  
#linear-gradient.gradient-example
%p
  This yields a gradient starting at the top with #fff, ending in #aaa  
#v-gradient.gradient-example
%p
  Same as above but with a #ccc at the halfway point  
#v-gradient-2.gradient-example
%p
  Same as the first example but with #ccc at the
  30% from the top, and #bbb at 70% from the top  
#v-gradient-3.gradient-example
%p
  This yields a horizontal linear gradient spanning from left to right.
#h-gradient.gradient-example

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3";
.gradient-example {
  width: 80px;
  height: 80px;
  background: red;
  margin: 20px; }
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient {
  @include radial-gradient(color-stops(aqua 10px, #1e90ff 30px), 45 45); }
// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient {
  @include linear-gradient(color-stops(white, #dddddd), left top); }
// This yields a gradient starting at the top with #fff, ending in #aaa
#v-gradient {
  @include linear-gradient(color-stops(white, #aaaaaa)); }
// Same as above but with a #ccc at the halfway point
#v-gradient-2 {
  @include linear-gradient(color-stops(white, #cccccc, #aaaaaa)); }
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
#v-gradient-3 {
  @include linear-gradient(color-stops(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa)); }
// This yields a horizontal linear gradient spanning from left to right.
#h-gradient {
  @include linear-gradient(color-stops(white, #dddddd), left); }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3
.gradient-example
  width: 80px
  height: 80px
  background: red
  margin: 20px
// This will yield a radial gradient with an apparent specular highlight  
#radial-gradient
  +radial-gradient(color-stops(#00FFFF 10px, #1E90FF 30px), 45 45)
// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient
  +linear-gradient(color-stops(#fff, #ddd), left top)
// This yields a gradient starting at the top with #fff, ending in #aaa  
#v-gradient
  +linear-gradient(color-stops(#fff, #aaa))
// Same as above but with a #ccc at the halfway point  
#v-gradient-2
  +linear-gradient(color-stops(#fff, #ccc, #aaa))
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top  
#v-gradient-3
  +linear-gradient(color-stops(#fff, #ccc 30%, #bbb 70%, #aaa))
// This yields a horizontal linear gradient spanning from left to right.
#h-gradient
  +linear-gradient(color-stops(#fff, #ddd), left)

@charset "UTF-8";
.gradient-example {
  width: 80px;
  height: 80px;
  background: red;
  margin: 20px;
}
#radial-gradient {
  background-image: -webkit-gradient(radial, 45 45, 0, 45 45, 30, color-stop(33.333%, #00ffff), color-stop(100%, #1e90ff));
  background-image: -moz-radial-gradient(45 45, circle, #00ffff 10px, #1e90ff 30px);
  background-image: radial-gradient(45 45, circle, #00ffff 10px, #1e90ff 30px);
}
#linear-gradient {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(left top, #ffffff 0%, #dddddd 100%);
  background-image: linear-gradient(left top, #ffffff 0%, #dddddd 100%);
}
#v-gradient {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(top, #ffffff 0%, #aaaaaa 100%);
  background-image: linear-gradient(top, #ffffff 0%, #aaaaaa 100%);
}
#v-gradient-2 {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 50%, #aaaaaa 100%);
  background-image: linear-gradient(top, #ffffff 0%, #cccccc 50%, #aaaaaa 100%);
}
#v-gradient-3 {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(30%, #cccccc), color-stop(70%, #bbbbbb), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 30%, #bbbbbb 70%, #aaaaaa 100%);
  background-image: linear-gradient(top, #ffffff 0%, #cccccc 30%, #bbbbbb 70%, #aaaaaa 100%);
}
#h-gradient {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(left, #ffffff 0%, #dddddd 100%);
  background-image: linear-gradient(left, #ffffff 0%, #dddddd 100%);
}