cross-browser background gradient

by evpozdniakov

HTML

<script src="http://static.contentabc.com/xxxtalentcash/base/cdn/common/js/vendor/modernizr-2.6.1.min.js"></script>
 <section class="box">

        Lorem ipsum...

 </section>

CSS

body {
    padding: 50px;
    background: #f9f9f9;
}
.box {
    width: 400px;
    padding: 100px;
    border: 1px solid #999;
    font-size: 24px;
}

.cssgradients .box {
  /* for IE10 & webkit we use "top" to set side we start from */
  background: -ms-linear-gradient(top, #fff, #999);
  background: -webkit-linear-gradient(top, #fff, #999);
  /* for opera & FF we use "to bottom" to set gradient direction */
  background: -o-linear-gradient(to bottom, #fff, #999);
  background: linear-gradient(to bottom, #fff, #999);
}
.no-cssgradients .box {
  /* for IE<10 we use microsoft gradient filter 
   * GradientType is gradient direction:
   * 0 for vertical (to bottom), 1 for horizontal (to right) */
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
  StartColorStr='#ffffff', EndColorStr='#999999');
}