Demo: Background Gradients

<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>

.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.

@import "compass";

.ex {
  width: 48%;
  margin-right: 2%;
  float: left;
  @include clearfix; }

.gradient-example {
  width: 80px;
  height: 80px;
  background: red;
  float: left;
  margin: 1em 1em 0 0; }

// This will yield a radial gradient with an apparent specular highlight
#radial-gradient {
  @include background-image(radial-gradient(45px 45px, aqua 10px, #1e90ff 30px)); }

// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient {
  @include background-image(linear-gradient(left top, white, #dddddd)); }

// This yields a gradient starting at the top with #fff, ending in #aaa
#v-gradient {
  @include background-image(linear-gradient(white, #aaaaaa)); }

// Same as above but with a #ccc at the halfway point
#v-gradient-2 {
  @include background-image(linear-gradient(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 background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa)); }

// This yields a horizontal linear gradient spanning from left to right.
#h-gradient {
  @include background-image(linear-gradient(left, white, #dddddd)); }

#svg-gradient {
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px; }

@import compass
.ex
  width: 48%
  margin-right: 2%
  float: left
  +clearfix

.gradient-example
  width: 80px
  height: 80px
  background: red
  float: left
  margin: 1em 1em 0 0

// This will yield a radial gradient with an apparent specular highlight  
#radial-gradient
  +background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))

// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient
  +background-image(linear-gradient(left top, #fff, #ddd))

// This yields a gradient starting at the top with #fff, ending in #aaa  
#v-gradient
  +background-image(linear-gradient(#fff, #aaa))

// Same as above but with a #ccc at the halfway point  
#v-gradient-2
  +background-image(linear-gradient(#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
  +background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa))

// This yields a horizontal linear gradient spanning from left to right.
#h-gradient
  +background-image(linear-gradient(left, #fff, #ddd))

#svg-gradient
  $experimental-support-for-svg: true
  +background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2))
  width: 80px
  height: 80px

.ex {
  width: 48%;
  margin-right: 2%;
  float: left;
  overflow: hidden;
  *zoom: 1;
}

.gradient-example {
  width: 80px;
  height: 80px;
  background: red;
  float: left;
  margin: 1em 1em 0 0;
}

#radial-gradient {
  background-image: -webkit-gradient(radial, 45px 45px, 0, 45px 45px, 30, color-stop(33.333%, #00ffff), color-stop(100%, #1e90ff));
  background-image: -webkit-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -moz-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -o-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: radial-gradient(45px 45px, #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: -webkit-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
  background-image: linear-gradient(left top, #ffffff, #dddddd);
}

#v-gradient {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa));
  background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
  background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
  background-image: -o-linear-gradient(#ffffff, #aaaaaa);
  background-image: linear-gradient(#ffffff, #aaaaaa);
}

#v-gradient-2 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
  background-image: -webkit-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: -moz-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: -o-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: linear-gradient(#ffffff, #cccccc, #aaaaaa);
}

#v-gradient-3 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(30%, #cccccc), color-stop(70%, #bbbbbb), color-stop(100%, #aaaaaa));
  background-image: -webkit-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: -moz-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: -o-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
}

#h-gradient {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -webkit-linear-gradient(left, #ffffff, #dddddd);
  background-image: -moz-linear-gradient(left, #ffffff, #dddddd);
  background-image: -o-linear-gradient(left, #ffffff, #dddddd);
  background-image: linear-gradient(left, #ffffff, #dddddd);
}

#svg-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2));
  background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  width: 80px;
  height: 80px;
}