July 29, 2007                                            

20 Popular CSS Online Tools and Generators

* This post is regularly updated. *
Well, a new list of popular CSS online tools and generators is launched today. All these tools are selected due to the design and popularity. And there are some tools are out of the list as the poor site design or similarity. The list is separated with “CSS Formatter and Optimizer”, “CSS Layout and Menu Generator” and “Miscellaneous Tools”. Say your words via comment and let me know your thoughts.

CSS Formatter and Optimizer

http://www.codebeautifier.com/
http://www.codebeautifier.com/

http://www.cleancss.com/
www.cleancss.com/

http://www.cssdrive.com/index.php/main/csscompressor/ - a online CSS compressor, powered by CSS Drive.
http://www.cssdrive.com/

http://iceyboard.no-ip.org/projects/css_compressor - another CSS compressor.
http://iceyboard.no-ip.org/

http://www.cssoptimiser.com/
http://www.cssoptimiser.com/

http://flumpcakes.co.uk/css/optimiser/
http://flumpcakes.co.uk/css/optimiser/

http://www.prettyprinter.de/
http://www.prettyprinter.de/

CSS Layout and Menu Generator

http://csscreator.com/?q=tools/layout - online CSS layout generator for you to create a fluid or fixed width floated column layout.
http://csscreator.com/?q=tools/layout

http://www.inknoise.com/experimental/layoutomatic.php - Layout-o-Matic automatically generates CSS layouts.
http://www.inknoise.com/

http://www.wannabegirl.org/firdamatic/ - an online tableless layout generator that allows you to create and customise layouts easily.
http://www.wannabegirl.org/firdamatic/

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php - CSS source ordered variable Border 1-3 columned page maker.
http://www.positioniseverything.net/

http://www.qrone.org/cssdesigner.html - online CSS style generator.
http://www.qrone.org/

http://www.scriptomizers.com/css/stylesheet_generator - a CSS stylesheet generator.
http://www.scriptomizers.com/

http://www.colly.com/scripts/rollover.html - CSS rollover generator.
http://www.collylogic.com/

http://www.webmaster-toolkit.com/css-menu-generator.shtml - CSS menu generator.
http://www.webmaster-toolkit.com/

http://www.listulike.com/generator/ - create cross-browser list-based navigation bars.
http://www.listulike.com/generator/

Miscellaneous Tools

http://www.roundedcornr.com/ - the king of online rounded corners generators with gradient.
http://www.spiffycorners.com/

http://www.theboxoffice.be/ - lets you wrap/float/contour text around freeform images using CSS.
http://www.theboxoffice.be/

http://riddle.pl/emcalc/ - estimates Em size equivalent to px size.
http://riddle.pl/emcalc/

http://www.css-ref.com/ - test your CSS code.
http://www.css-ref.com/

*Updates

http://services.immike.net/css-checker/ - find CSS selectors that aren’t used by any of your HTML files and may be redundant.
http://services.immike.net/css-checker/

* Updates

http://www.cssfly.net/ - easy source code viewer and editing websites directly.
http://www.cssfly.net/

  12 Responses to "20 Popular CSS Online Tools and Generators"

  1. July 30, 2007 06:04 am
    eburhan

    Very nice list about css. Thank you ;)

  2. July 30, 2007 06:31 am
    Wallace

    thanks for the words,
    your site also looks content rich, nice work.

  3. July 31, 2007 03:25 am
    Jakob

    This is exactly what I expected to find out after reading the title o.us poetry. Thanks for informative article

  4. August 1, 2007 11:16 pm
    Anon

    Don’t forget CSS Superdouche: http://isnoop.net/tools/css.php

  5. August 2, 2007 12:54 am
    sameer

    thank you for this article. now i can have a clean css that too with w3c standard i hope.

  6. August 2, 2007 05:59 am
    jim callender

    good, for people who want to look at how the layouts are controlled by CSS. However, i prefer to know how exactly the code has been written, so i code it myself.

    also CSS optimisers tend to leave your code uneditable in a long line of non-wrapping text… which may take longer to do future updates on..

    just a word of warning..

  7. August 2, 2007 09:14 am
    turin

    Thanks.. good job

  8. August 3, 2007 10:59 am
    trice

    @jim callender - sorry for bothering, but saving a second, uncompressed version of your CSS for later updates and new compression shouldn’t be too much work and worth the effort for a better performance

  9. August 3, 2007 12:06 pm
    Wallace

    jim, you are right, i tested CB for my other sites before and found it may not work well at IE so make sure to double check at major browsers.

  10. September 22, 2007 04:06 am
    Waqqas Hanafi

    Thanks a lot! Very helpful for sure!

  11. October 2, 2007 11:14 am
    Matt M

    Great gems in here! I also just made the CSS Color Extractor, where you can copy and paste CSS code, and it will visually display to you the results of the colors. Maybe useful, I hope!

    http://hackd.wordpress.com/2007/10/01/extract-colors-from-css-code/

  12. November 12, 2007 03:38 am
    Olli L

    Well, you guys rock!
    Thank you so much for this list. Tried the Code Beautifier and this thing works almost perfect.

Glad to hear from you.