40 + Free CSS Tools

CSS is the most important part in modern standard based web design. If you are a professional designer or a blogger, who wants to tweak a weblog template to your needs then CSS is the first thing you want to modify. Here are some of the tools that are useful in the process, of course these tools won’t be like magic boxes for your design but atleast they are useful in one or the other way.

CSS Layout Generators

YAML Builder: “Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

YUI CSS Grid Builder: The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.

HTML PHP CSS Website Template Maker: This PHP – HTML – CSS template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout.

Firdamatic: Firdamatic is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only.

Free CSS Template Code Generator: This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

QrONE CSS Designer: CSS Style Editor

CSS Layout Generator: 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.

CSS Page Maker: CSS Source Ordered Variable Border 1-3 Columned Page Maker

Templatr: Templatr is a wordpress blog template generator for the novice blogger. It generates XHTML and CSS valid template.

CSSEZ: Online Based CSS Authoring Tool, supports wordpress or Movable type template formats.

WordPress Theme Generator:  This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.

Optimization

CSS Compressor: Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

CSS Tidy: CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script

CSS Formatter & Optimiser: Formats and Optimises CSS code, either paste the code or supply URL for CSS file.

Format CSS: Online CSS Formatter

CSS Optimizer: This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box

Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS: This is a source code beautifier (source code formatter), similiar to indent

CSS Compressor: The CSS Compressor makes major changes to stylesheets

CleanCSS: CSS Formatter and Optimiser. The same selectors and properties are automatically merged.

Tabifier: The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements.

CSS Navigation

CSS Tab Designer: CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

CSS Menu Generator: CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

List-O-Matic: Create CSS-styled navigation blocks based on unordered list items. Get your semantics on!

List-O-Rama: List-O-Rama is a Dreamweaver extension that will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish. The code is automatically generated and inserted in your page.

CSS Menu Maker: CSS menu generator makes it easy to create custom CSS menus without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want.

CSS Play Menus: Wide range of CSS Menus to choose from.

Izzymenu: Izzymenu has more than 100 CSS styled menus to choose from. The web interface is Ajaxified and it is relatively easy to create a Menu of your choice. Select a style from menu styles and customize to your needs. You can create horizontal or vertical menus using the menu builder.

CSS Portal, CSS Menu Generator: This generator will create a horizontal menu with as many as 8 tabs. Choose from 23 designs.

CSS Buttons: CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.

CSS Boxes

CSS Rounded Box: It generated 4 corner images and CSS to create CSS boxes, pick the colors you want to use for the box before generating the box.

Spiffy Box: The Spiffy Box is really just an automated way to create the code and image needed to create CSS Boxes.

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

Spanky Corners: ‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work.

CSS Frameworks

Blueprint CSS: Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

YAML CSS Framework: “Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Elements: Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient.

LogiCSS: The Logic CSS framework is a collection of CSS files and PHP utilities to cut development times for web-standards compliant xHTML layouts.

Eswat: This framework is meant to remove the hassle of recreating the same folders, HTML tags, CSS rules, Photoshop guides, etc. for every new project, and help create grid-based layouts in Photoshop to boot.

Other Tools

I Like Your Colors: It shows colors used in HTML and CSS of any website.

CSS Form Code Maker: This HTML – CSS form generator will create a nice looking layout for forms. The time is now right – to move to ‘tableless’ layout for forms. And at the same time, add a ‘little color’ to the forms.

CSS Vista: CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

HTML and CSS Table Border Style 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. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

CSS Color Extractor: With CSS Color Extractor you can copy and paste CSS code, and it will visually display to you the results of the colors.

Related: Firefox Extensions for Developers, Web 2.0 Background Generators

Do let me know in the comments if i missed any good CSS related tools, i will add it to the list.