Background gradient - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Background gradient

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#top_container
{
   min-height: 200px;
   padding-bottom: 5px;
   background: #d1d1ff;
   background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(red));
   background: -moz-linear-gradient(#d1ffff, #d1d1ff);
   background: -o-linear-gradient(#d1ffff, #d1d1ff);
   background: -webkit-linear-gradient(#d1ffff, #d1d1ff);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffff', endColorstr='#d1d1ff',gradientType=0 );
   background: -ms-linear-gradient(top, #d1ffff 30%, #d1d1ff 100%);
   background:linear-gradient(to bottom, #d1ffff 30%, #d1d1ff 70%);
}


      </style> 
 </head> <!--from   w ww .jav  a  2  s.  c o  m-->
 <body> 
  <div id="top_container"> 
  </div>  
 </body>
</html>

Related Tutorials