Adding Background Gradient in CSS

/ Published in: CSS
Save to your folder(s)

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.

Copy this code and paste it in your HTML
  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>
  10. <div class="grad">This is a DIV with gradient background.</div>


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.