CSS 3 Online Generators

There’s some pretty cool free online generators for creating CSS3 code around these days.

Rather than work out how to make your code play nice with all browsers, another option is to use a code generator.

Lets check out a few of the best tools and find out how you can use them for customization and design.

1. http://css3gen.com/

Excellent code generator for producing CSS3 which is cross browser compliant.

CSS3gen uses RGB codes rather than hex code format so you may find these color tools handy for generating your color codes in RGB.

Generates code for:

• Box Shadow
• Text Shadow
• Border Radius
• Gradients
• Button Generator

2. http://www.css3.me/

Simple tool for generating CSS3 cross browser compliant code for border, border radius (rounded corners), background color, box shadow and gradient.

Quick Beginners Guide

1. Choose the border width
2. Choose the border color
3. Choose the background color
4. Select the border radius to make your corners more rounded
5. Add a box shadow effect
6. Add a gradient effect to the background color
7. Find the selector in your style sheet where you want to use the code and add the generated code
8. Test the code with your existing declarations in your child themes style.css file (preferably on a local installation)

3. http://www.css3maker.com/

This tool is good for generating all the basics plus more advanced CSS3 code.

You can use it to produce code for:

• Animation
• Transition (make buttons & boxes move in & out)
• Text Rotation
• Custom Fonts
• Transform (Skew and Rotate)

4. http://www.cssmatic.com

New tool which is great for making CSS for background gradients, box shadows, noise texture and border radius.

How About You?

Care to share any tips you have about creating cross browser compliant CSS3 code for use in web design for WordPress?