Techie Tip of the Week: Creating Linear Gradients Using CSS

Want to add a linear gradient effect on your web content? Now you can do so with CSS!

  • Webkit browsers (e.g., Safari, Chrome)
    • background: -webkit-gradient(linear, starting point, ending point,
      starting color, ending color);
    • For example –
      .gradient {background: -webkit-gradient(linear, left top, right bottom, from(#000), to(#900);>
  • Gecko browsers (e.g., Firefox)
    • background: -moz-linear-gradient(starting point,  starting color,  ending color);
    • For example –
  • Internet Explorer
    • filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='starting color', endColorstr='ending color');
    • For example  – .gradient {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#990000');>

Here’s a complete example:
<!DOCTYPE html> <html> <head> <title>Linear Gradient</title> <style type="text/css"> h1 {  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#820000', endColorstr='#ffffff'); /* for IE */       background: -webkit-gradient(linear, left top, left bottom, from(#820000), to(#fff));       background: -moz-linear-gradient(top,  #820000,  #fff);    }  </style> </head>  <body> <h1>This heading is in a gradient.</h1> </body> </html>
heading in a gradient - red to white

Want to learn more great Cascading Style Sheets tips? Come take one of our CSS classes:

Tags: ,

Leave a Reply

You must be logged in to post a comment.