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:
Originally based on jscolor (a JavaScript color picker developed by Jan Odvarko). It is one of the CSS generators that use a WYSIWYG approach to choose direction of the gradient and is cross-browser compliant. Moreover, it takes particular care for display on IE browsers. That might be a plus when your intended audience is largely made up of IE users. Another additional feature is support for circular and elliptical gradients.
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
- Gradients
- CSS transforms, animations and transitions
- RGBA values
- Shadows
- Rotation
- Fonts
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.
Peter Funk and Eric Hoffman‘s CSS3 generator has a very cool interface:
Major features are — with immediate preview of the results:
- Styling the border radius;
- Box shadow;
- Background gradient;
- Opacity.
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.
Hi,
Have made a website based on CSS/3, where there are more than 200 icons using CSS2 and CSS3 and used only 2 span tags.
URL: http://www.uiplayground.in/css3-icons/
Is there a way where you can add this website on your website.
Thanks,
Sulaman
Hi Sulaman,
Thank you for your comments.
I think we can. Will update the post.
Warmest regards and looking forward for more of your comments.
AP
[…] CSS generators for fast web page styling […]