Just over a year ago, I included a short review of CSS3Gen as part of five CSS3 Tools and Generators that were evaluated in that piece. At that time the online generator included three CSS3 tools for creating border radius, box shadow, and text shadow. Since that time, CSS3Gen has added two more tools, a button generator and a CSS3 gradients generator. This piece will review all five of the tools included now within the CSS3Gen code snippet generator.

CSS3Gen allows you to easily generate useful snippets of CSS3 code and copy them straight into your text editor for web page documents and 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 five tools provided by CSS3Gen take care of all the vendor prefixes for creating border radius, box shadow, text shadow, buttons and CSS3 gradients. Just select the CSS3 element you want to use, style it in your browser, and then paste the resulting CSS3 code snippet it into your web page document or CSS style sheet.

Button generator

The CSS3Gen Button Generator allows you to quickly edit the base settings which include the button text, font size, padding, radius, and text color using sliders for the pixels and RGB sliders for the text color. Optionally, you can enter the numeric pixels, RGB, percentage, or decimal settings for each adjustment; this is the case for all five of the generator tools. The Base Settings generator section is displayed open in Figure C as shown in Google Chrome Version 23.0.1271.64 m:

Figure C

The Background settings generator allows you to adjust the angle in degrees, start percent, start color RGB, end percent, and end color RGB settings. The Drop Shadow setting generator allows you to make adjustments to the angle percent, distance in pixels, blur in pixels, RGB color, and opacity in decimals. And the Text shadow generator allows you to adjust the angle in degrees, distance and blur in pixels, the RGB color, and opacity in decimals.

After making a few adjustments to the base setting including the text, and then keeping the defaults for the remaining settings, the sample button preview is adjusted live, while the HTML and CSS code snippet is created on the fly as well. This is displayed in Figure D in Google Chrome Version 23.0.1271.64 m:

Figure D

Border radius

The border radius generator allows you to set rounded corners using CSS3 without the use of images, creating a cross-browser support code snippet. The border radius generator allows you to set all four corners of a box area independently and each radius is represented in pixels, within a range of 0 to 90 pixels. I’ve created a circle shape by setting all four corners to a radius of 90 as shown in Figure F:

Box shadow

The box shadow generator allows you to add shadow effects to any box element with adjustments to the angle, distance, blur in pixels, the RGB color, and opacity in decimals. The box shadow generator is displayed in Figure H:

Text shadow

The text shadow generator tool allows you to set text effects by making adjustments to the angle in degrees, distance, blur in pixels, RGB color, and opacity in decimals. The default settings are displayed in Figure J:

CSS3 Gradients

The CSS3 Gradients generator tool allows you to build background linear gradient styles without the need for images, by making adjustments to the angle in degrees, the start and end percentages, and the start color and end color in RGB. With just a few adjustments to the angle (90 degrees) and the start and end RBA colors, the resulting background linear gradient was created as shown in Figure L:

Quickly generating CSS3 buttons, border radius, box shadow, text shadow, and CSS3 gradients has never been easier. The CSS3Gen tool allows you to modify settings and generate online and on-the-fly previews of each. Giving you the resulting CSS3 code to copy into your HTML or stylesheet makes life easier for the web developer looking to take advantage of the CSS3 technology.