» Skip to the CSS3 Gradient Generator Tool

Lately, pretty cool things happen in the world of web design. HTML5 and CSS3 very easily get under the skin of everyone who is involved in the web development in any way. Although, all of these stuff aren't that revolutionary and have been around for a while in the computer designing, yet the possibility to create color gradients, box and text shadows, and even transitions and animations by the use of simple text code simply can't leave you indifferent. The good news is that most of the browsers available throughout the wide range of modern electronic devices already accept and are capable of presenting these new HTML and CSS features. The bad news is that HTML5 and CSS3 aren't standards yet, and we'll have to wait for a (pretty long) while until they get out of the W3C working drafts and become a de facto standards.

But, who needs to wait when all of these goodies are already available. The webkit based Safari and Chrome, along with the always ambition Firefox have made it possible for most of the new HTML and CSS features, Opera also keeps up the pace in a decent manner (it doesn't support background gradients at the time of writing this post), and suprisingly, the latest versions of Internet Explorer seem to make great efforts in order to join the club -- they have a long way to go, meanwhile there are plenty of workarounds, not as cool and elegant as a simple line of code, but if you really care for it and it makes a difference for your design and visitors you can do it.

One of the long awaited features in the new era of web design are the gradients. Combined with shadows and rounded borders they are a good starting point for creating pretty looking designs without a single image and with just a few lines of code. The downside, at least for the moment, is that you must define most of the new CSS properties explicitly for each browser engine. For example, if order to add gradient background in Safari or Chrome, and Firefox you'll have to include "-webkit-gradient" for webkit based Safari and Chrome, and "-moz-linear-gradient" for Mozilla's Firefox for the background-image property in your CSS style. That is pretty time consuming, so we developed a small tool that should speed up the things a bit. The tool is a hybrid -- a HTML/CSS/JavaScript/Flash -- application that generates all of the style properties. We've decided to use Flash as a symbolic (anti)act of the latest sparkles that appeared between the pure HTML5 and the pure Flash favorisers -- In the spirit of the good 'ol Why can't we be friends, or if you are a more romantic-ish in the spirit of Make love not war :)

I should be a cool button! Click me to start the CSS3 tool

The application is pretty easy to use (it should be), so go ahead and give it a try!