While revamping my blog, I ran over several CSS generators that are freely available on the web. These considerably speed up the process of styling your web. So I though would be nice to share some links. Some might be interested.
Gradient CSS generators
One of the best CSS generators is ColorZilla, available also as plugin for Firefox and Chrome:
It uses a Photoshop paradigm, with sliders and markers to set up color points, thresholds and opacity. Hue adjustments are available together with gradient reversal option. The code generated is cross–browser compliant. An additional option for IE9 compliance is also available. It comes with a collection of predefined gradients to be picked or adjusted at your will.
Another excellent CSS generator is CSS3 Gradient Generator by Damian Galarza:
This allows random creation of a gradient, selecting the direction, intensity, opacity and hues and allows export in standard HEX definition or RGB. It is also cross-browser compliant but does not have a plugin version.
Microsoft provides it’s own implementation of gradient CSS generators with CSS Gradient Background Maker:
Some other interesting CSS generators that might worth looking at are:
- GradColor — supports only latest browsers;
- CSS3 Maker — one of the more complex CSS generators that also provide layout styling; see below;
- CSS3 generator — by Peter Funk and Eric Hoffman, a fully customizable CSS3 generator; see below;
Complex layout CSS Generators
In this category I have found the excellent CSS3 Maker:
This is one of the most comprehensive CSS generators I have found while googling. It allows styling of:
- Border and radius
- CSS transforms, animations and transitions
- RGBA values
It supports all major browsers latest versions (Firefox 3.0+; IE 9+; Safari 3.1+; Opera 10.0+; Chrome 4.0+) and also has support for RGBA compatibility for BB mobile browser (6.0+) and iOS (1.0+). In the top right corner of the page there is a link to a gallery of some very interesting styling options.
Major features are — with immediate preview of the results:
- Styling the border radius;
- Box shadow;
- Background gradient;
Clicking on the large blue button opens a code generator window, with options for major browsers:
Some other excellent CSS generators are:
Hope these will help you create excellent web designs.