CSS generators for fast web page styling

Some online resources that quickly generate CSS code for rapid formatting

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:

CSS generators — ColorZilla

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:

CSS generators — CSS3 Gradient Generator

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:

CSS generators — 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:

Complex layout CSS Generators

In this category I have found the excellent CSS3 Maker:

CSS3 Maker — CSS generators

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:

CSS3 Generator — CSS generators

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:

CSS3 Generator — CSS generators

Some other excellent CSS generators are:

Hope these will help you create excellent web designs.

3 Comments to CSS generators for fast web page styling

  1. sulaman says:

    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

    • AP says:

      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

  2. […] CSS generators for fast web page styling […]

Leave a Reply

Your email address will not be published. Required fields are marked *