<div class='ex'>
<div class='gradient-example'></div>
<p>
This box has no gradients
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='radial-gradient'></div>
<p>
This will yield a radial gradient with an apparent specular highlight
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='linear-gradient'></div>
<p>
This yields a linear gradient spanning from $start to $end coordinates
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='v-gradient'></div>
<p>
This yields a gradient starting at the top with #fff, ending in #aaa
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='v-gradient-2'></div>
<p>
Same as above but with a #ccc at the halfway point
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='v-gradient-3'></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>
<div class='ex'>
<div class='gradient-example' id='h-gradient'></div>
<p>
This yields a horizontal linear gradient spanning from left to right.
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='svg-gradient'></div>
<p>
This gradient has SVG support enabled for opera and IE9.
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='angle-gradient'></div>
<p>
This gradient uses an angle to specify the gradient direction.
</p>
</div>
<div class='ex'>
<div class='gradient-example' id='angle-gradient-svg'></div>
<p>
This is the SVG shim for the angle gradient without it being used
as a fallback.
</p>
</div>

.ex
.gradient-example
%p
This box has no gradients
.ex
#radial-gradient.gradient-example
%p
This will yield a radial gradient with an apparent specular highlight
.ex
#linear-gradient.gradient-example
%p
This yields a linear gradient spanning from $start to $end coordinates
.ex
#v-gradient.gradient-example
%p
This yields a gradient starting at the top with #fff, ending in #aaa
.ex
#v-gradient-2.gradient-example
%p
Same as above but with a #ccc at the halfway point
.ex
#v-gradient-3.gradient-example
%p
Same as the first example but with #ccc at the
30% from the top, and #bbb at 70% from the top
.ex
#h-gradient.gradient-example
%p
This yields a horizontal linear gradient spanning from left to right.
.ex
#svg-gradient.gradient-example
%p
This gradient has SVG support enabled for opera and IE9.
.ex
#angle-gradient.gradient-example
%p
This gradient uses an angle to specify the gradient direction.
.ex
#angle-gradient-svg.gradient-example
%p
This is the SVG shim for the angle gradient without it being used
as a fallback.