Mobile

1. ProCSSor

   With this online CSS Prettifier you can just copy/paste your CSS (or upload the file or type a URL), choose whether to have it “neat,” “pretty,” or “awesome,” and ProCSSor will clean up and improve your CSS. With a useful – and optional – fail-safe mode, this tool is now also available as a native Mac application.

2. Remove Unused CSS

   GTmetrix’s Page Speed tool provides a report for any web page, breaking down page load speed by a wide variety of factors. Can be used as a bookmarklet and to compare different web pages. With unneeded CSS rules often a factor in excessive load times, identifying which CSS-related processes are not optimized for speed of loading can be extremely important. Google note about Remove Unused CSS.

3. CSS Compressor

   Cut down on the size of your CSS stylesheets by choosing which level (highest, high, standard, low) of compression you want (as level decreases, legibility of the resulting file also decreases). Just copy/paste the CSS you wish to compress. You can identify the specific properties you wish to compress (colors, font-weight, unnecessary backslashes/semicolons, etc.).

4. CSS3 Generator

   Need some CSS but not quite sure how to code it? This tool will do the work for you, and covers a number of popular style items ranging from the simple to more complex. Examples of CSS styling possibilities include border radius, multiple columns, and shadows and transitions of various kinds.

5. CSSTidy

   Clean, Optimize and Compress CSS, does your CSS need tidying up? With similar options to the CSSCompressor tool, this one also lets you upload a CSS file or access that file at a given URL. Has three compression levels (low for development, medium for staging, high for production) and four CSS options to choose from (colors, font-weight, lowercase selectors and unnecessary backslashes).

6. SpritePad

   Create and Edit CSS Sprites, SpritePad has a three-step process for creating and editing CSS sprites in seconds. Drag and drop an image and the tool creates a PNG sprite and the appropriate CSS code for immediate use. A free account gives you cloud storage for your sprites. Premium features are also available, and a guided tour helps first-time users.

7. CSSMatic

   CSSmatic gradient generator allows you to use multiple colors and opacity stops to create amazing gradient effects with smooth color changing style or subtle transparencies. The Noise Texture tool is lets you create great patterns for use as background. The box shadow, lets you create nice shadow effect for your <div>s with the ability to specify the blur and spread radius. Great time-savers when building interfaces.

8. CSS Type Set

   CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content

9. Blueprint CSS

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

10. CSS 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.

CSS sprites are great for minimizing the number of requests our websites perform by embedding multiple images in a single image and displaying the appropriate ones using background-position. However, once the images are placed on a canvas, finding the positions of each item is a time-consuming process, here comes in SpritePad as an impressive web app.

CSS3 has taken web designing to a new platform. With features like css3 rounded corners and text-shadow, designers are no longer required to rely on bulky CSS hacks or graphics. However, with different browsers having their specific implementation of CSS3 it’s a load on designers to remember the syntax for each and every browser.

To make your work easy there are many CSS3 generator that helps to simplify the task. By just moving the sliders or giving in some values (for e.g. Border radius for the box) and the generator will generate CSS3 code with multiple browser support. So, now you need not to worry about the css3 browser support and use these generators to reduce your work load and development time.
1. CSS3.0 Maker Generator :- It is a free tool to practice on css properties , values and let you to generate a simple Cascading Style Sheets for your site or blog .

2. CSS3 Please :- It is a cross-browser CSS3 rules generator . With this generator you can easily edit edit the css3 values and use them on your stylesheet .

3. CSS3 Button Maker :- It is a cool css3 button maker tool and provides you various options to draw things , pick colors to create your own css3 buttons .

4. CSS3 Pie :- This CSS3 progressive internet explorer tool makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration properties and features like rounded corners, soft drop shadows and gradients .

5. CSS3 Generator :- This online css3 tool will let you generate CSS3 properties for border radius, box shadow, text shadow, RGBA, @font face, multiple columns, box resize, box sizing, outline .

6. CSS3 Generator :- It is a simple generator which helps you to understand capabilities of CSS3 .

7. CSS3 Gradient Generator :- The CSS3 Generator is a useful tool to get various gradients results and provides a simple graphical user interface for working with CSS webkit .

8. CSS3 Menu :- It is a amazing free CSS3 menu generator , which let you generate css menus and buttons with css3 rounded corners, css3 gradient and css3 shadows.

9. CSS3 Gen :- This CSS3 generator helps you to create useful snippets for border radius , box shadow and text shadow easily . Just select the CSS3 element , customize it in browser and then paste it into your project .

10. CSS3 Rounded Corner Generator :- It is a useful tool and helps you to generate the necessary code , which is used to make rounded corners (border-radius) with right css3 properties for your webpages.

11. CSS3 Click Chart :- This CSS3 Click Chart or help charts showcase all new css properties with a clickable heading that opens a box at the bottom of the page for information on that particular feature.

12. CSS3 Selectors Test :- It is a amazing tool that let you conduct small tests that are being used together for determining if your browser will work with CSS selectors or not, and If any selector of CSS is not compatible with CSS3 Selectors test, it will be marked automatically.

13. Quick 3-Color CSS3 Gradient Generator :- This handy tool will let you create linear and radial gradients easily  with simple procedure .

14. CSS Border Radius Generator :- This css3 border generator tool help you to create stylish and good looking curved corners for your web page .

15. Border Image Generator :- This tool will help you to generate codes for border radius properties and allows a single image to be used to style the borders and background of a particular element.

16. CSS3 Column Generator :- It is a css3 multi column generator tool and compatible with chrome , safari , firefox and mozilla deerpark . Tool is in different language but you can use Google translate tool for English .

17. CSS3 Sandbox :- It tool will help you to generate linear gradients, radial gradients, text shadows, box shadows, transforms and text stroke.

18. Xeo CSS :- It is a web-based tool for generating clean code for new CSS3 properties . It is also a good CSS3 gradient generator styling tool for web designers.

19. CSS Corners :- It is a handy tool with nice CSS3 gradient maker options and professional looking rounded corners .

20. CSS3 Gradient Button Generator :- It is amazing css3 button generator combined with shadows and rounded borders .

IE WebDeveloper Toolbar

Is a free plugin The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. Features:

• Explore and modify the document object model (DOM) of a Web page.
• Locate and select specific elements on a Web page through a variety of techniques.
• Selectively disable Internet Explorer settings.
• View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
• Outline tables, table cells, images, or selected tags.
• Validate HTML, CSS, WAI, and RSS web feed links.
• More

FireBug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

• Inspect HTML and modify style and layout in real-time
• Use the most advanced JavaScript debugger available for any browser
• Accurately analyze network usage and performance
• Extend Firebug and add features to make Firebug even more powerful
• Get the information you need to get it done with Firebug.
• More

Safari Developer Tools

Apple has brought its expertise in Mac OS X and iOS development tools to the web. Safari includes a powerful set of tools that make it easy to modify, debug, and optimize a website for peak performance and compatibility. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

CSS Grid Builder

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). 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.

CSS Compressor, Minify CSS

Use CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!

GIMP Photoshop

Adobe Photoshop is the undisputed heavyweight king of image editing, capable of satisfying every conceivable print- and online-imaging desire. However, like Visio, Photoshop’s features don’t come cheap. One very capable alternative is GIMP, an open source image manipulation program capable of producing very impressive graphics and sporting an extensible interface similar to Photoshop’s plugin community.

BrowserShot

Even though browser developers have made great strides towards standards compliance in recent years, it goes without saying that you should always “trust, but verify” (i.e. test your website within multiple browsers residing on multiple operating systems). Yet many developers might not have a Mac or even a Windows machine at their disposal. A great alternative is BrowserShots, an online utility capable of not only testing browser compatibility on multiple operating systems, but also multiple browser versions within these systems. Further, it tests compatibility with a number of lesser-used browsers, including Lynx, K-Meleon and Konqueror.

GreenShot Screenshot grabber

Whether you’re creating Web-based user documentation or sending clients screen grabs of user interface prototypes, you’ll need a capable tool for taking screenshots. Yet it wasn’t until relatively recently that capable open source solutions were available. If you’re a Windows user, I recommend Greenshot, a great utility capable of not only taking screenshots but also manipulating and sending screenshots.

FireQuery

Allows you to debug and code jQuery code. Requires Firebug.

FirePHP

Allows you to debug and code on the fly with PHP. Requires firebug.

Online CSS3 creator

Spits out CSS code that will be able to be viewed across different CSS3 capable browsers.

FontSquirrel

Ever wanted FREE @Face-Fonts that are very easy to use? Font Squirrel takes all the head-aches out of using fonts on the web.

Lorem Ipsum Text Generator

An easy way to get some text for making content in mockups.

IETester

If you want to test older version of Internet Explorer I recommend that you look at this tool called IETester.

SEO HTML Cheat Sheet

This cheat sheet cover most of what you need, Important SEO Html Tags, Search Engine Indexing Limits, Recommended Title Tag Syntax, Common Canonical Issues, Important Search Engine Robot User-Agents etc.

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example: Read More