Today I want to present you some CSS3 tools that will make your life easier, if you need to insert CSS3 code into your stylesheets and don’t know CSS3 by heart (especially for what concerns browser-specific properties). There are obviously tons of such web-based tools around, but I will try to present you the two most promising ones, which cover all the main CSS3 properties that you may need. At the end I will also give you two examples of more specific generators, for comparison.
CSS 3.0 Maker
The first tool that I want to present you is CSS 3.0 Maker. It contains all main CSS3 properties, namely: Border Radius, Gradient, CSS Transform, CSS Animation, CSS Transition, RGBA, Text Shadow, Box Shadow, Text Rotation and @Font Face. On the homepage you will already see a very user-friendly interface where you can change the options for a given property. In the screenshot below you can see an example for the Border Radius property. Please note that for some properties, like for Border Radius, on the homepage you will be presented with a simplified interface instead of the more complete interface on the actual page for that property.
Once you change a given option (in the top left, under “CSS Styles”), the preview (in the top center, under “CSS3 Preview Area”) and the resulting code (in the top right, under “CSS3 Codeview”) are immediately updated. This is very useful because you have an immediate preview of the result and can copy/paste the code into your stylesheet, without needing to refresh the page or download something. If you want, once you have finished playing around, you can download your code (an archive containing an HTML file which displays the preview again and contains the generated CSS code) by clicking on the “Download” button on the right. Additionally, for each CSS3 property you are provided the browser compatibility, and even the mobile compatibility (in the bottom center, under “PROPERTY NAME Browser/Mobile Compatibility”). All these features make CSS 3.0 Maker the most promising tool around, because no other tool (as far as I have seen up to now) provides you with so much useful information about the main CSS3 properties in such an easy way.
Another very useful tool is CSS3 Generator. This one contains some different properties and is more in a wizard style than the previous one, and allows for more personalization (because instead of sliders you are provided with text fields for changing the values). When you visit the CSS3 Generator website, you will first be asked which property interests you, then you will be asked eventual additional questions (like, still taking the Border Radius Moneygram online example, if your borders are going to be rounded equally) and finally you will be able to change the options of the given property (see screenshot below).
In this case, too, the results are displayed immediately in the preview area on the left, you have the code generated immediately which you can copy/paste into your stylesheet and you have an overview of the browser compatibility. Although at first hand it appears much simpler than the previous one, this tool is also very promising, and it has some improvements compared to CSS 3.0 Maker (like for example the use of textfields for entering values). On the other hand, some properties proposed in the list are not handled directly, but refer to other websites.
There are many other, similar tools, but most of them are focused on a single CSS3 property. This kind of tools is useful if you are searching only for that single, given property, also because in some cases they allow for a larger set of options than the more general solutions described above. One example is Border radius, a simple web-based tool that generates CSS code for the border radius property.
It allows you to choose a different radius for each corner (but the first value entered is automatically applied to all corners for simplicity) and you can select specific browsers with the provided checkboxes. Here, too, the code snippet and the preview are automatically generated instantly. Even if it is specific for the border radius property, this tool is very simple, intuitive and effective. Another example is Ultimate CSS Gradient Generator, by ColorZilla, a very complete web-based tool for generating nice CSS3 gradients.
This tool allows you to choose one of the existing presets, or to generate your own (even complex) CSS3 gradient. You can add multiple opacity stops and color stops, move them around freely, choose between different orientations, add IE9 support and much more. In this case, too, you have an immediate generation of the code and of a preview. You can even import existing gradients from an image or from CSS code and generate permalinks for the generated gradients.
Different typologies of CSS3 generators exist. As we have seen some are more general, others are more specific, some offer more options, some less. Everyone will have his favourite type, but mine is definitively CSS 3.0 Maker. This is mainly because of its simplicity and completeness, even if it has its limits due to the use of sliders (but, after all, you can still edit the code by hand if you should need larger values, even if in most cases it does not have that much sense…). It convinced me also because it gives you an immediate overview of all information (for example, you don’t have to pass your mouse over the browser icons to see which versions are supported, as it is the case for CSS3 Generator), and that on a quite cool looking interface. For the moment no solution is perfect: one generator has nice functions that the other does not have and vice versa, but CSS 3.0 Maker is definitively the best (multi-property) generator available for the moment. What do you think? Do you use CSS code generators? Which one is your favourite? I would be happy to read your feedback in the comments.