Techie Tip of the Week: Creating Linear Gradients Using CSS

Home » cascading style sheets » css » 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: ,

This entry was posted on Friday, July 15th, 2011 at 3:58 pm and is filed under cascading style sheets, css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.