CSS: Cross Browser Gradients

As a Web Developer, my usual ethic is to immediately create an ingenious architecture and spill out reusable code within the framework I've just created; while my design aspects are crudely left to the side until I need a GUI to make the thing work!
In practise, it doesn't really matter which order these are done, just as long as the requirements are in place and there is a general idea.

However, when i'm at home (without the glorious support of a design team to make my images and write my CSS for me), things do get done, but designing pages with a div layout; bearing cross browser functionality in mind and actually making it look good takes a lot of skill. So here's one for the skillset....


Cross Browser Gradients with CSS

.gradientTitle {

    background-color: #CECEF6; /* Opera and browsers that do not support gradients  */

    background: -webkit-gradient(linear, left top, right bottom, from(#CECEF6), to(#FFFFFF)); /* Webkit browsers: Chrome, Safari etc. */

    background: -moz-linear-gradient(left,  #CECEF6,  #FFFFFF); /* Mozilla Firefox */

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#CECEF6', endColorstr='#FFFFFF'); /* IE 5.5+ */

    padding: 2px 2px 2px 8px;

    color: #1C1C1C;

    width: 60%;

}

I have set an initial background for browsers that do not support gradients. If a browser is capable of picking up one of these three, the background-color is overridden.


Preview

Here's a Sample Heading