20 Free Apps & Tools For Working With CSS

For web developers and designers CSS is like a second language. CSS or Cascading Style Sheets is a markup language when paired with HTML, CSS allows a developer to decide and define how a web page or a website will ultimately look or how it will appear to the visitors. Some of the elements which CSS has an impact on include font size, font style, the overall layout, the colors and other design elements.

Today you will find apps & tools for creating CSS based animations, responsive menu generators, apps for collecting stats and sorting CSS, generators and much more.

1. CSScomb

CSScomb is a coding style formatter for CSS. You can easily write your own configuration to make your style sheets beautiful and consistent.

2. Shrthnd

Shrthnd is a handy tool that converts CSS properties into shorthand, making shorter and more readable stylesheets.

3. The Ultimate CSS Generator

The Ultimate CSS Generator

4. PX2EM

px-em is a px to em tool which allows you to work out the em sizes from px.

5. RQRWD

RQRWD is a really quick responsive web design tool which allows you to work out the elements width in % from px. Just add the child element width in the top box, parent element width in the bottom and you’re done!

6. CSS Ruler

Explore CSS lengths.

7. Rocket

Rocket creates an animation when an item is moved to another element.

8. Colors

A nicer color palette for the web.

9. Pantone-Sass

A list of Pantone© colors as Sass variables. For now, just the Pantone© Coated colors are available

10. CSS Dig

CSS Dig finds and groups stylesheets and style blocks on most websites, providing an easy way to analyze the code and plan refactors.

11. CSSPeeper

CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful styles with the Chrome extension. The mission is to let Designers focus on design, and spend as little time as possible digging in a code

12. Hint

Hint.css lets you put tooltips in your website/app by simply adding few classes and an attribute in your markup.

13. Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

14. CSS Stats

Enter a URL and get statistics for a site’s CSS

15. CSS Menu Maker

CSS Menu Maker offers a glamorous webapp for browsing many different styles of navigation menus. You’ll find dropdowns, fly-ins, and tons of responsive solutions made with pure CSS.