15 Best CSS3 Generators For Lazy Designers

August 3rd, 2010 Posted in Various

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

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-gen-4

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

css3-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

css3-border

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-buttonmaker

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

css3-fon_squ

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

westive

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

css3-gradient

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

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

CSS3Sandbox_thumb

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

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

css3-menu

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

13. CSS3 Column Generator

css3-column

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

css3-gen-17

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

css3-round

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.

Author -

who has written 551 posts on [Re]Encoded.com.


Contact the author


8 Responses to “15 Best CSS3 Generators For Lazy Designers”

  1. paul alexander Says:

    Really great article! Paul Alexander


  2. Donald Karvis Says:

    Please do not forget http://text-align.com !


  3. Jessica Bosari Says:

    Lazy? I call it efficient! Thanks for the tools!


  4. Peter Says:

    I like no.15 best, it’s fast and has all the options I need, but sadly only supports rounded borders. There is also css3maker.com but you have to download the few lines of code as a zip file and you can’t enter values; only sliders.

    I do really like the fun approaches to the problem of browsers reinventing different versions of the wheel. I think the best is CSS3 Please.


  5. Eric Hoffman Says:

    You need to add this one to your list:
    http://www.css3.me


  6. Anthony Says:

    Heck yeah! http://www.css3.me is sweeet!


  7. Quick & Easy CSS3 Generators - Think2Loud Says:

    [...] below for more CSS3 generators:5 Time Saving CSS3 Tools and Generators10 Useful CSS3 Generators15 Best CSS3 Generators For Lazy Designers20+ Free CSS3 Code GeneratorsRelated PostsSpeed Up & Improve iPhoto ’09 [...]


  8. CSS3 code Generator « codewala Says:

    [...] 15 Best CSS3 Generators For Lazy Designers [...]


Leave a Reply