[Re]Encoded.com

15 Best CSS3 Generators For Lazy Designers

CSS has always been the foundation of every web design on the internet. And with the introduction of CSS3, things have become pretty interesting. CSS3 has introduced many new CSS properties that can be exploited by the web designers and developers to create some great CSS3 effects. However, the major drawback of all those new CSS3 properties is that most of them have multiple browser-specific implementation. What that means is, if a property works on a browser, you can’t be sure that it will work on all the browsers. To have that functionality, the developer or designer has to add some extra bit of code.

But many of us are too lazy to do that To help you out, we have compiled below, a comprehensive list of best CSS3 auto generators which will help you in the CSS3 code generating process.

1. CSS3 Please

CSS3 Please! is a web-based & simple-yet-effective cross-browser CSS3 rules generator. Currently, it helps you write the rules for: border-radius, box-shadow, gradient(linear), rgba colors, transform (rotate), transition and @font-face. As every browser may require different prefixes for the CSS3 properties, this tool makes it so easy by providing them all with an editable & well-commented way where the output can be seen instantly.

2. CSS3 Generator

CSS3 Generator is a quick way to discover how to achieve certain functions. A single drop-down menu gives you access to border radius, box shadow, text shadow, RGBA, @FontFace, multiple columns, box resize, box sizing, outline and selectors. Select any of these functions and you’ll be presented with a few options; fill those in and you’ll have your code. Fill in the form and CSS3 Generator will output code for you.

3. CSS3 Click Chart

Click Chart is another good CSS3 generator tool. Not very customizable (just click to see the code) but probably the most thorough on the list as far as number of effects covered.

4. Border Radius

One of the more elegant options for setting a border radius. Just type in a single number and it does the rest. CSS border radius Generates “border-radius” property in Mozilla, WebKit and standard CSS3 syntax. It is the generator for lazy people

5. CSS-Tricks Button Maker

CSS3 has some excellent properties that helps you to generate very cool looking buttons for your use. An excellent little button maker from Internet wiz Chris Coyier. Just use the sliders to change the properties.

6. Font Squirrel @Font-Face Kit Generator

More and more browsers are able to handle embedded fonts, but getting the right formats for each browser can be tricky. FontSquirrel has a @font-face generator that gets you exactly what you need. Upload a TrueType or OpenType font and it gives you the CSS files and the EOT file you need for your browser.

7. Westciv

Instead of being a CSS3 generator dedicated to a single property, Westciv has a number of useful CSS3 generators. That makes it a great application to be bookmarked.

8. CSS3 Gradient Generator

The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients for developers and designers to generate a gradient in CSS. It also provides a simple graphical user interface. Generates linear “gradient” property for Mozilla and WebKit browsers

9. Widgetpad CSS3 Generator

Widgetpad CSS3 generator is another one with several properties and effects to choose from. Although it doesn’t provide a wide range of options, but we still found it usable.

10. CSS3 Sandbox

CSS3 Sandbox have a set of css3 code generator including shadows, graddiants, trnasforms text-stroke and more tools . Discover it by your self and you will love playing with. More cool tools coming soon to the sandbox, including tools to help explore opacity, multi-column text, transitions, animations and embeddable fonts.

11. Border Image

Border-image is another great CSS3 auto generation tool that minifies the operation of fiddling with the border-radius property of CSS3. With this tool, you can get ready-made codes for border radius property.

12. CSS3 Menu Generator

This one is actually a full-fledged downloadable application for creating complex CSS3 menus with rounded corners, gradients, and more.

13. CSS3 Column Generator

One of the few column generators I could find (CSS3 Generator also does columns). This one isn’t in English but is still easy enough to figure out and the code it spits out is of course fully readable.

14. Quick 3-Color CSS3 Gradient Generator

As the name suggests, this tool is a Quick 3-color CSS3 gradient generator tool. With this tool, you can quickly generate CSS3 gradients comprising of three unique colors.

15. CSS3 Rounded Corner Generator

With rounded corners looking more elegant in any web design, CSS3 Rounded Corner Generator is a great and automatic tool to help you out in generating great and professional looking rounded corners.

• Tweet