Posted By

apphp-snippets on 03/06/13


Tagged

css background gradient


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Abiotic


Adding Background Gradient in CSS


 / Published in: CSS
 

URL: http://www.apphp.com/index.php?snippet=css-background-gradient

Today with CSS3, you no longer need a background image for gradients. You can use CSS to add a gradient to the background of some elements on your page. For ex.: change the color hex values ("84c8d7" and "327fbd") to the gradient color you need.

  1. <style>
  2. .grad{
  3. background: -webkit-gradient(linear, left top, left bottom, from(#84c8d7), to(#327fbd));
  4. background: -moz-linear-gradient(top, #84c8d7, #327fbd);
  5. filter:
  6. progid:DXImageTransform.Microsoft.gradient(startColorstr="#84c8d7", endColorstr="#327fbd");
  7. }
  8. </style>
  9.  
  10. <div class="grad">This is a DIV with gradient background.</div>

Report this snippet  

You need to login to post a comment.