40 Powerful CSS Tools And Generators To Automate Your Workflow

Posted in Coding, HTML & CSS, Tools, Web Design4 years ago • Written by 28 Comments

Preview-css-tools-generators-powerfulShowcase of 40 useful and powerful CSS tools and generators. These tools can really relieve developers work in many ways – I understand you like always to do everything by yourself but it’s not the best way in the most cases, because it really takes time and such liberty we don’t always have.

This is considered to be really complete list about everything CSS related, as CSS lover myself I really evaluate good automated ways so I can focus on things I enjoy the most – creating elegant, usable and optimized website! I just hope you will find some relief in this list as well! Enjoy your time and test these tools for best results!

1. CSS Layout Generator

Showcase of 40 useful and powerful CSS tools and generators. These tools should really relieve web developers  work. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Layout-generator-useful-css-tools-generators

2. Simple CSS

Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.

Simple-useful-css-tools-generators

3. Code Beautifier

Formats and optimizes CSS.

Code-beautifier-useful-css-tools-generators

4. Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

Clean-useful-css-tools-generators

5. CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

Compressor-useful-css-tools-generators

6. CSS Superscrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

Superscrub-useful-css-tools-generators

7. CSS Validator

The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.

Validator-useful-css-tools-generators

8. CSS Sorter

CSS Sorter is a free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.

Sorter-useful-css-tools-generators

9. Browser Support of CSS Properties & Selector

This is a list of CSS properties and selectors with the first browser versions that support them. The list includes most CSS2.1 properties and some of CSS3, more will be added as time permits.

Browser-support-selectors-useful-css-tools-generators

10. Layout Generator

Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.

Layout-useful-css-tools-generators

11. Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

Variable-grid-system-useful-css-tools-generators

12. Blueprint Grid Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css  and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24  columns in your design, this generator now enables you that flexibility with Blueprint.

Blueprint-grid-useful-css-tools-generators

13. Grid Builder

The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes. Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

Grid-builder-useful-css-tools-generators

14. CSS Menu Builder

Choose from our 300+ horizontal menus, our 700+ vertical menus combinations and our breadcrumb menus  that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

Menu-builder-useful-css-tools-generators

15. CSS Menu Maker

Here you can exploit gallery of professionally designed CSS menus, customize them and then download the HTML and CSS.

Menu-maker-useful-css-tools-generators

16. Jotform

Web-based WYSIWYG form builder

Jotform-useful-css-tools-generators

17. Quick Form Builder

Allows you to easily create CSS forms.

Quick-form-builder-useful-css-tools-generators

18. CSS Button & Text Field Generator

Generates CSS based buttons and text fields.

Text-field-useful-css-tools-generators

19. Rounded Corner Generator

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript.

Rounded-corners-useful-css-tools-generators

20. CSS Type Set

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

Typeset-useful-css-tools-generators

21. Typetester

The Typetester is an online application for comparison of the fonts for the screen. It’s primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Typetester-useful-css-tools-generators

22. Image Replacement Methods

Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.

Image-replacement-methods-useful-css-tools-generators

23. CSS Frame Generator

This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line.

Frame-useful-css-tools-generators

24. Postable

“I absolutely hate having to switch all the “< ” and “>” signs in my code to “&lt;” and “&gt;”, respectively. I also hate having to write “&amp;” anytime I want to include an ampersand. This makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” Created by Elliot Swan.

Postable-useful-css-tools-generators

25. Slickmap

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Slickmap-css-tools-generators

26. Text Wrapper

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

Text-wrapper-useful-css-tools-generators

27. Listamatic

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

Listamatic-useful-css-tools-generators

28. CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position  CSS property can then be used to shift the visible area to the required component image

Sprite-useful-css-tools-generators

29. Colors Pallete Generator

Welcome to CSS Drive’s Image to Colors Palette Generator! Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.

Colors-pallete-css-tools-generators

30. CSS Table Wizard

Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.

Table-wizard-useful-css-tools-generators

31. Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

Em-calculator-useful-css-tools-generators

32. IE6 CSS Fixer

A tool specifically designed to ease the pain of the IE6 CSS debugger. This tool was conceived to decrease the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible.

Ie6-fixer-useful-css-tools-generators

33. Mappet

CSS image maps generator

Mappet-useful-css-tools-generators

34. Sky CSS Tool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

Sky-css-tools-generators

35. ReCSS

This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.

Reload-useful-css-tools-generators

36. CSS Viewer

A simple CSS property viewer. Firefox addon.

Viewer-useful-css-tools-generators

37. The Box Office

The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

The-box-office-useful-css-tools-generators

38. CSS Evolve

CSSEvolve lets you play with many properties of a web site, including the site’s color scheme, fonts, borders, and more. CSSEvolve works through a process of simulated evolution in which you select site features that you like and refine them through multiple generations.

Evolve-useful-css-tools-generators

39. Wordoff

Wordoff applies the following rules to strip the cruft that is pasted into WYSIWYG editors from Word:

  • Attributes are removed for all elements except <a>s
  • <span>s and <div>s are removed
  • Empty elements are removed
  • Consecutive line breaks are reduced to two

Wordoff-useful-css-tools-generators

40. CSS Fly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet  files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the sceneries of your favourite websites.

Fly-useful-css-tools-generators

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

28 Comments Best Comments First
  • Tuanz

    Tuesday, February 21st, 2012 12:53

    24

    Glad that you liked it.:), i think adobe will given a new version for design css

    +1
  • Randy Jensen

    Wednesday, March 17th, 2010 16:04

    18

    I was just looking for Clean CSS the other day and couldn’t remember it’s name. And CSS Evolve looks really interesting. Thanks for the list!

    I would also add http://www.css3generator.com to the list.

    +1
  • ebsoft

    Wednesday, March 17th, 2010 06:22

    16

    thank you..
    nice collections about CSS

    +1
  • Andrew Donaldson

    Tuesday, March 16th, 2010 16:04

    11

    Excellent resource!

    0
  • Justin Carroll

    Tuesday, March 16th, 2010 16:52

    12

    First of all, I appreciate the collection here. I’m not sure why code-cleaners exist except to enable the lazy coder. Also, if you’re using grid frameworks as a basis for your design solutions then shame on you. I’m super thankful for Nathan Smith’s work on the 960.gs (I’m a fan), but it’s not a design solution and I’m sure he would agree. Don’t forget that art direction, understanding the needs of your client, the big idea, is more important than any method used to execute on.

    0
    • Saad Bassi

      Tuesday, March 16th, 2010 19:36

      8

      Hi Justin,

      Thanks for your detailed comment. I have heard a lot of appreciation of 960 grid system. Going to check out ASAP.

      0
  • Sully

    Tuesday, March 16th, 2010 19:28

    7

    Wow – Nice collection! I have not seen several of these before. Thanks

    0
  • Matt

    Tuesday, March 16th, 2010 13:19

    2

    Some efficient tools there. Might I also suggest Primer (http://primercss.com) which I just found out about the other day. It generates a starter CSS file from an html file using all the ids and classes. Really neat.

    0
    • Dainis Graveris

      Tuesday, March 16th, 2010 14:32

      3

      great share! thanks man, very useful! thumbs up!

      0
  • Nickio15

    Tuesday, March 16th, 2010 14:32

    4

    Some great resources here!

    0
  • ken

    Tuesday, March 16th, 2010 17:53

    6

    Clean CSS and Code Beautifier are almost the same. Thanks for sharing such a good stuff :)

    0
  • Simon

    Tuesday, March 16th, 2010 14:47

    5

    What a great work! One more CSS menu buider could be added here, MenuBuilder.me

    0
  • Bill Bolmeier

    Wednesday, March 17th, 2010 04:22

    14

    Yes, great list thanks. Tweeted and bookmarked. Love #3, #6 and #39. Also checking out the 960 Grid System mentioned in the comments.

    0
  • Narendra

    Tuesday, March 16th, 2010 13:11

    1

    Really helpful list..bookmarked it

    0
  • Frederik

    Friday, January 27th, 2012 09:22

    23

    Thanks very much for this great toolslist! Very helpful!

    0
  • Lani Calcano

    Friday, March 2nd, 2012 17:35

    25

    Wow, a lot data found in one post. I’m hoping I will utilize a few of this particular in order to my personal be employed in the longer term! .

    0
  • Kang Andre

    Saturday, March 3rd, 2012 12:10

    26

    It is your colourful blog that brings me a lot of knowledge about webdesign.

    0
  • Peter

    Sunday, April 22nd, 2012 17:03

    28

    There is actually few tools in the list that I didn’t know about so thanks a lot. The text wrapping tools seem interesting so I’m going to check those out now.

    0
  • Tuanz

    Saturday, March 17th, 2012 18:18

    27

    Thanks very much for this great toolslist! Very helpful!

    0
  • Lavoie Danielin

    Friday, September 23rd, 2011 04:16

    22

    great share! Thank you for your post. I look forward your new posts.

    It’s so useful. I have apply it on my site.

    0
  • Logobird

    Wednesday, March 17th, 2010 01:06

    15

    Great list. Appreciate you taking the time to put it together.

    0
  • enjoy

    Wednesday, March 17th, 2010 15:01

    17

    thank You! this collection is very useful.

    0
  • Murlu

    Thursday, March 18th, 2010 05:35

    20

    Awesome collection.

    I usually go with the hacker mentality of using your resources well. Why reinvent a technique when it’s already available ya know?

    You can always improve upon it but your time is very valuable, using tools like these will help reduce the amount of time you have to spend working on some of the menial tasks.

    -1
  • Brett Widmann

    Friday, November 5th, 2010 00:16

    21

    These seem like they could be very helpful. Thanks for sharing such a great list.

    -1
  • Travis

    Tuesday, March 16th, 2010 15:20

    9

    Great tools, thanks for sharing.

    -2
    • Saad Bassi

      Tuesday, March 16th, 2010 19:37

      13

      Glad that you liked it.:)

      0
  • Peter

    Sunday, April 22nd, 2012 17:03

    28

    There is actually few tools in the list that I didn’t know about so thanks a lot. The text wrapping tools seem interesting so I’m going to check those out now.

    0
  • Tuanz

    Saturday, March 17th, 2012 18:18

    27

    Thanks very much for this great toolslist! Very helpful!

    0
  • Kang Andre

    Saturday, March 3rd, 2012 12:10

    26

    It is your colourful blog that brings me a lot of knowledge about webdesign.

    0
  • Lani Calcano

    Friday, March 2nd, 2012 17:35

    25

    Wow, a lot data found in one post. I’m hoping I will utilize a few of this particular in order to my personal be employed in the longer term! .

    0
  • Tuanz

    Tuesday, February 21st, 2012 12:53

    24

    Glad that you liked it.:), i think adobe will given a new version for design css

    +1
  • Frederik

    Friday, January 27th, 2012 09:22

    23

    Thanks very much for this great toolslist! Very helpful!

    0
  • Lavoie Danielin

    Friday, September 23rd, 2011 04:16

    22

    great share! Thank you for your post. I look forward your new posts.

    It’s so useful. I have apply it on my site.

    0
  • Brett Widmann

    Friday, November 5th, 2010 00:16

    21

    These seem like they could be very helpful. Thanks for sharing such a great list.

    -1
  • Murlu

    Thursday, March 18th, 2010 05:35

    20

    Awesome collection.

    I usually go with the hacker mentality of using your resources well. Why reinvent a technique when it’s already available ya know?

    You can always improve upon it but your time is very valuable, using tools like these will help reduce the amount of time you have to spend working on some of the menial tasks.

    -1
  • Randy Jensen

    Wednesday, March 17th, 2010 16:04

    18

    I was just looking for Clean CSS the other day and couldn’t remember it’s name. And CSS Evolve looks really interesting. Thanks for the list!

    I would also add http://www.css3generator.com to the list.

    +1
  • enjoy

    Wednesday, March 17th, 2010 15:01

    17

    thank You! this collection is very useful.

    0
  • ebsoft

    Wednesday, March 17th, 2010 06:22

    16

    thank you..
    nice collections about CSS

    +1
  • Logobird

    Wednesday, March 17th, 2010 01:06

    15

    Great list. Appreciate you taking the time to put it together.

    0
  • Bill Bolmeier

    Wednesday, March 17th, 2010 04:22

    14

    Yes, great list thanks. Tweeted and bookmarked. Love #3, #6 and #39. Also checking out the 960 Grid System mentioned in the comments.

    0
  • Justin Carroll

    Tuesday, March 16th, 2010 16:52

    12

    First of all, I appreciate the collection here. I’m not sure why code-cleaners exist except to enable the lazy coder. Also, if you’re using grid frameworks as a basis for your design solutions then shame on you. I’m super thankful for Nathan Smith’s work on the 960.gs (I’m a fan), but it’s not a design solution and I’m sure he would agree. Don’t forget that art direction, understanding the needs of your client, the big idea, is more important than any method used to execute on.

    0
    • Saad Bassi

      Tuesday, March 16th, 2010 19:36

      8

      Hi Justin,

      Thanks for your detailed comment. I have heard a lot of appreciation of 960 grid system. Going to check out ASAP.

      0
  • Andrew Donaldson

    Tuesday, March 16th, 2010 16:04

    11

    Excellent resource!

    0
  • Travis

    Tuesday, March 16th, 2010 15:20

    9

    Great tools, thanks for sharing.

    -2
    • Saad Bassi

      Tuesday, March 16th, 2010 19:37

      13

      Glad that you liked it.:)

      0
  • Sully

    Tuesday, March 16th, 2010 19:28

    7

    Wow – Nice collection! I have not seen several of these before. Thanks

    0
  • ken

    Tuesday, March 16th, 2010 17:53

    6

    Clean CSS and Code Beautifier are almost the same. Thanks for sharing such a good stuff :)

    0
  • Simon

    Tuesday, March 16th, 2010 14:47

    5

    What a great work! One more CSS menu buider could be added here, MenuBuilder.me

    0
  • Nickio15

    Tuesday, March 16th, 2010 14:32

    4

    Some great resources here!

    0
  • Matt

    Tuesday, March 16th, 2010 13:19

    2

    Some efficient tools there. Might I also suggest Primer (http://primercss.com) which I just found out about the other day. It generates a starter CSS file from an html file using all the ids and classes. Really neat.

    0
    • Dainis Graveris

      Tuesday, March 16th, 2010 14:32

      3

      great share! thanks man, very useful! thumbs up!

      0
  • Narendra

    Tuesday, March 16th, 2010 13:11

    1

    Really helpful list..bookmarked it

    0

Comments are closed.

50.16.65.168 - unknown - unknown - US