Free Apps and Tools For Working With CSS

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

In this post I’ve gathered a wide range of different tools for speeding up and making your work with CSS easier.


extractCSS a tool for extracting ids, classes and inline styles from an HTML document and then outputting them as a CSS stylesheet.


CSScomb  a coding style formatter which sorts CSS properties into a specific pre-configured order.

CSS Compressor

CSS Compressor–  a little app which minimizes and compresses your CSS.

Live CSS Editor

Live CSS Editor  – a Chrome and Safari extension that allows you to freely write CSS rules on any site and instantly see the results.


px-em–  a tinyl tool that will work out the EM sizes from PXs. Just add the parent PX size in the box, the required size in the bottom and you’re done.



RQRWDC – (Really Quick Responsive Web Design Calculator) — a responsive web design tool that allows you to work out an elements width in % from PX.

flat UI colors

flat UI colors  –  a huge collection of inspiring flat UI colors that you can easily copy and paste into your own stylesheet.


PatternBolt  – a collection of SVG patterned backgrounds, packed into a single CSS/SASS file.


iconizr– a tool for converting SVG images into a set of CSS icons.


CSSynth– a handy little app that will help to run CSS animations in order.  – a Data URI converter that will turn images into base64 encoded strings that can then be inputted directly in your HTML and CSS files.

CSS Shapes Editor

CSS Shapes Editor– a Chrome extension that offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on any selected element.

CSS Diner

CSS Diner  – a simple little game that will help you learn about CSS selectors. All you have to do is type in the correct selector to complete each level. Go on, give it a try.

If you know any other free apps and tools for working with CSS, please suggest and I’ll add them to the list.

Stay tuned for further updates.

And have a nice day!

You may also like...

Read previous post:
6 Essential Google Search Tips You Should Know

Start searching smarter. Google is the go-to destination when you need to find something on the web—the verb "to google"...