Q
Version: 1.0.1

Demo: Background Gradients

This box has no gradients

This will yield a radial gradient with an apparent specular highlight

This yields a linear gradient spanning from $start to $end coordinates

This yields a gradient starting at the top with #fff, ending in #aaa

Same as above but with a #ccc at the halfway point

Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top

This yields a horizontal linear gradient spanning from left to right.

This gradient has SVG support enabled for opera and IE9.

This gradient uses an angle to specify the gradient direction.

This is the SVG shim for the angle gradient without it being used as a fallback.

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