No announcement yet.

How to create CSS gradients

  • Filter
  • Time
  • Show
Clear All
new posts

  • How to create CSS gradients

    I have CSS gradients on one of my website templates for a website I am developing, and I'm sure many others are wondering how to create CSS gradients. To create CSS gradients use the following CSS code on the respective CSS selector:

    [FONT="Courier New"][size=2]#top_menu ul li a:hover
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8d3e5', endColorstr='#94c5e7');
    	background: -webkit-gradient(linear, left top, left bottom, from(#b8d3e5), to(#94c5e7));
    	background: -moz-linear-gradient(top,  #b8d3e5,  #94c5e7);
    In the case above, I have it for menu links when hovered over, as shown below:

    The first line of code (i.e. the filter property) is for Internet Explorer compatibility, the second is for Webkit-based browsers such as Safari and Google Chrome and the third is for Firefox version 3.6 and above. I do believe CSS3 will bring a universal standard of generating CSS-based gradients, akin to using the color property on a particular selector, in other words. It seems CSS3 support is being implemented faster by browsers than the W3C at the moment .