Many of the CSS3 specifications have been reviewed and presented through previous posts here in the web developer blog, and getting them implemented across all devices and browsers can be a challenge depending on which styling properties are supported. Extra prefix codes help, but keeping up with the specification adoption rates among browsers can become a major headache.

One of the easier ways to help getting and keeping your CSS3 code up to date with customizations is to utilize online tools and auto-generated code applications which take guesswork out of your development process. In this post, I will highlight and review several of the tools and generators which offer great advantages and assistance for keeping your CSS3 up to date and effective across most modern browsers.

CSS Selector’s Test

CSS3 Selectors Test is not a code generator, but is a great tool for running a large number of small tests to determine if your browser is compatible and supports CSS selectors that are not dependent on user interactions. The selectors test is a part of CSS3.Info, which touts itself as “everything you need to know about CSS3”. The selectors test (Figure A)is a good starting point to determine indications where certain browsers may not support specific CSS3 selectors.

A test in the IE 8.0.6 browser reported 20 unsupported selectors and 1 buggy selector out of forty-one selectors; out of total 574 tests, 345 passed, which equates to a 60% passing score. A test in Firefox 7.0.1 reported from the 41 selectors that 41 passed, 0 were buggy and 0 were unsupported, and passed 574 out of 574 tests for a 100% passing score. One final test I ran in Chrome 15.0 reported the same results as Firefox, which equated to a 100% passing score.

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator (Figure B takes the power of HTML5 and CSS3 to specify gradients with pure styling and without the need to create custom images, and these CSS3 gradients can be used repeatedly for backgrounds and gradient effects on your websites.

The CSS Gradient Generator works best on the most recent versions of Firefox, Chrome, Safari, Opera or IE. The generator features an import from existing CSS, more than 135 gradient presets, opacity support with multiple stops, and import from image which converts an image gradient to CSS.

I selected the preset named “Blue to Transparent Sharp” and then modified the vertical orientation to diagonal from top left to bottom right, checked IE, kept the comments checked, and added a check for IE9 support, which generated a gradient class along with an IE 9 override to be added to the HTML and complete the IE9 support. The gradient stops can also be adjusted, along with sliders for adjusting the hue, saturation, and lightness. Another option is available for the color format selection which defaults to rgba, and however, hex, rgb, hsl, and hsla color formats are also provided. Once you’re done, you can link to, save or share the current gradient using its unique link, or copy the generated CSS and paste it into your CSS document. I copied the code into my text editor and had to make a few adjustments, as the auto-generated code listed each styling as background: I adjusted them to background-image: and then all the styling properties worked.

I also imported a gradient image and created the CSS3 from the generator tool; I had to tweak the code just as I had done in the auto-generated task earlier to get it working correctly. The output for each of the tested gradients is displayed in Chrome 15.0 in Figure C:

CSS3 Please!

CSS3 Please! The Cross-Browser CSS3 Rule Generator (Figure D) is a great online tool for making inline changes to edit CSS for many styling properties. Several of the available editable styles include border-radius, box-shadow, linear-gradient, rotate, background-color, transition, text-shadow, animation, @keyframes, and more. The online application by Paul Irish and Jonathan Neal is a joint effort for assisting web developers at creating useful cross-browser CSS3 code in short order.

I tested the online application using the first snippet which is the .round_box styling property utilizing border-radius to set the corners. I modified the default 12px and increased it to 24px, and copied it to my clipboard. Then I added a few additions of border style and color, and a defined height, and within just a few short minutes, had created this simple rounded box as displayed in Chrome 15.0 below.

Figure E

CSS Gen

CSS3Gen (Figure F) allows you to easily generate useful snippets of CSS3 code and copy them straight into your web document projects. For example, with this tool, there is no more trying to remember what the syntax is for the border-radius rule in a webkit browser. The three tools provided by CSS3Gen take care of all the vendor prefixes for creating border radius, box shadow, and text shadow; just select the CSS3 element you want to use, style it in your browser and then paste it into your web document.
I tested the box shadow tool and with on-the-fly live preview, you can adjust the angle, distance, blur, rgb, and opacity of the shadow, with the resulting CSS3 ready to copy and paste in just seconds as displayed in Figure G.

And when copied into my document project this is the example result in Chrome 15.0:

Figure H

CSS3 Playground

CSS3 Playground (Figure I) by Mike Plate is a wonderful online tool for creating CSS3 compliant styling for CSS3 columns, gradient backgrounds, transforms, text shadows, radius and box shadow, and several others. The tool provides an on-the -fly update ability with live preview of each change along with the styles to use in the HTML and CSS files.
I wanted to test the columns generator tool and found it quite easy to adjust all the settings using the sliders and manual entry. Within seconds I had created a style with three columns, 10px gap, 2px rule thickness and a warm orange color. The resulting output is displayed in Firefox 7.0.1 in Figure J below.

And when the styling is applied to my example CSS and HTML web documents, it results in Figure K as displayed in Chrome 15.0:

When you are coding and styling in CSS3 from scratch and it’s just taking too long or if you need to plug in a quick modification, these online CSS3 tools and code generators are a time saver and come in handy when you’re under the crunch to get it done now.