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, cyan 10px, dodgerblue 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.33333%, #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}