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

@import "compass";

.ex {
  width: 48%;
  margin-right: 2%;
  float: left;
  @include clearfix;
  p {
    padding-top: 10px;
  }
}

.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(to bottom right, 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(to right, white, #dddddd));
}

#svg-gradient {
  $svg-gradient-shim-threshold: 1 !global;
  @include background-image(linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}

#angle-gradient {
  $svg-gradient-shim-threshold: 1 !global;
  @include background-image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}

#angle-gradient-svg {
  background-image: -svg(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}

@import compass

.ex
  width: 48%
  margin-right: 2%
  float: left
  +clearfix
  p
    padding-top: 10px

.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, cyan 10px, dodgerblue 30px))

// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient
  +background-image(linear-gradient(to bottom right, white, #dddddd))

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

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

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

#svg-gradient
  $svg-gradient-shim-threshold: 1 !global
  +background-image(linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2))
  width: 80px
  height: 80px

#angle-gradient
  $svg-gradient-shim-threshold: 1 !global
  +background-image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2))
  width: 80px
  height: 80px

#angle-gradient-svg
  background-image: -svg(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2))
  width: 80px
  height: 80px

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

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

#radial-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjQ1cHgiIGN5PSI0NXB4IiByPSIzMCUiPjxzdG9wIG9mZnNldD0iMzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjMDBmZmZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWU5MGZmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -moz-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -webkit-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
}

#linear-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
  background-image: -webkit-linear-gradient(top, #ffffff, #dddddd);
  background-image: linear-gradient(to bottom right, #ffffff, #dddddd);
}

#v-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
  background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
  background-image: linear-gradient(#ffffff, #aaaaaa);
}

#v-gradient-2 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: -webkit-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: linear-gradient(#ffffff, #cccccc, #aaaaaa);
}

#v-gradient-3 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIi8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNiYmJiYmIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  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: -moz-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: -webkit-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
}

#h-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(left, #ffffff, #dddddd);
  background-image: -webkit-linear-gradient(left, #ffffff, #dddddd);
  background-image: linear-gradient(to right, #ffffff, #dddddd);
}

#svg-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+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: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2);
  width: 80px;
  height: 80px;
}

#angle-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjA5MTUwNiIgeTE9IjAuMTU4NDk0IiB4Mj0iMS4wOTE1MDYiIHkyPSIwLjg0MTUwNiI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -moz-linear-gradient(330deg, #2ac363, #cd8c14, #9c4cc2);
  background-image: -webkit-linear-gradient(330deg, #2ac363, #cd8c14, #9c4cc2);
  background-image: linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2);
  width: 80px;
  height: 80px;
}

#angle-gradient-svg {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjA5MTUwNiIgeTE9IjAuMTU4NDk0IiB4Mj0iMS4wOTE1MDYiIHkyPSIwLjg0MTUwNiI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  width: 80px;
  height: 80px;
}