10 Must Have CSS Tools for Web Developers to Prettify, Remove, Compress and Generate CSS

By September 26, 2013Mobile
  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.

Leave a Reply