Create color gradient mixin - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Create color gradient mixin

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

div.gradient {<!--from  w ww.  j  a  va 2  s.c o  m-->
   background: grey;
   background: -moz-linear-gradient(top, grey, grey 50%, yellow 50%, yellow 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, grey), color-stop(50%, grey), color-stop(50%, yellow), color-stop(100%, yellow));
   background: -webkit-linear-gradient(top, grey 0%, grey 50%, yellow 50%, yellow 100%);
   background: -o-linear-gradient(top, grey 0%, grey 50%, yellow 50%, yellow 100%);
   background: -ms-linear-gradient(top, grey 0%, grey 50%, yellow 50%, yellow 100%);
   background: linear-gradient(to bottom, grey 0%, grey 50%, yellow 50%, yellow 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffed3537', endColorstr='#fffb3e40', GradientType=1);
   width: 200px;
   line-height: 4em;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="gradient">
    &nbsp; 
  </div>  
 </body>
</html>

Related Tutorials