30 Free Tools & Apps for Working With CSS

We have accumulated a super-useful collection of our favorite little web-based apps and tools for when you’re working with CSS. All of the tools have been created with the intention of being either time-saving generators to some of the more frustrating aspects of working with CSS or handy little problem-solving tools.

You will find tools for creating CSS-based animations, responsive menu generators, apps for collecting stats and sorting CSS, generators for creating pie and circle menus, and much, much more.

Get ready to start bookmarking, here they all are:

Circulus

CIRCULUS.SVG is an SVG circular menu generator.

CIRCULUS.SV SVG circular menu generator

CSS Ruler

CSS Ruler is a handy web-based tool for exploring CSS lengths.
CSS Ruler  handy web-based tool for exploring CSS lengths

Visualize the box-model

A useful app to help you visualize the box-model.

A useful app to help you visualize the box-model

Encoding / Decoding Tool

One Click Encoding Decoding Tool is a useful app for converting content to ASCII character-set.

A useful app for converting content to ASCII character-set

SVGOMG

SVGOMG is a web-based app for optimizing and configuring SVGO.
SVGOMG  web-based app for optimizing and configuring SVGO

Rocket

Rocket is a simple tool for creating web animations.

Rocket

Font Library

Font Library is an open source project to tag and organize Google Fonts.

Font Library - An open source project to tag and organize Google Fonts

Pie Menu Generato

A super simple Pie Menu Generator.

A super simple Pie Menu Generator

extractCSS

extractCSS is a tool which can extract ids & classes from HTML documents and output a CSS stylesheet.

extractCSS A tool which can extract ids & classes from HTML documents and output a CSS stylesheet

CSS Shrink

CSS Shrink is a small tool for ‘shrinking’ CSS files.

CSS Shrink a small tool for shrinking CSS files

CSSynth

CSSynth is a small app for running animations in order.

CSSynth A small app for running animations in order

EnjoyCSS

EnjoyCSS is a useful tool that allows you to adjust rich graphical styles quickly without coding.

EnjoyCSS A useful tool that allows you to adjust rich graphical styles quickly without coding

Flexy Boxes

Flexy Boxes is a CSS flexbox playground and code generation tool.

Flexy Boxes  CSS flexbox playground and code generation tool

Create CSS3

Create CSS3 is a super-simple CSS3 generator.

Create CSS3 - A super-simple CSS3 generator - Web based small tiny app

NTH-TEST

NTH-TEST is a nth-child and nth-of-type tester.

NTH-TEST - Web based small tiny app

CSS3 Generator

CSS3 Generator is a simple CSS3 generator.

CSS3 Generator - Web based small tiny app

SpinKit

SpinKit – Simple loading spinners animated with CSS.

SpinKit - Web based small tiny app

CSSComb

CSSComb – Sort CSS Properties in a Specific Order.

CSSComb - Sort CSS Properties in a Specific Order

px-em

px-em is a PX to EM calculator.

px-em - A PX to EM calculator - Web based small tiny app

typesetwith.me

typesetwith.me is a web-based typography and legibility sandbox.

typesetwith.me - Web based small tiny app

Type Scale

Type Scale is a typographical visual calculator.

Type Scale - Web based small tiny app

SVGeneration

SVGeneration.

SVGeneration - Web based small tiny app

TypeWonder

TypeWonder is a useful tool for testing web fonts on the fly.

TypeWonder - Web based small tiny app

Glyphter

Glyphter is a handy tool for creating icon fonts from SVGs.

Glyphter A handy tool for creating icon fonts from SVGs

iconizr

iconizr is a tool for converting SVG images to a set of CSS icons.

iconizr A tool for converting SVG images to a set of CSS icons

iconmelon

iconmelon – Quickly create a library of SVG icons.

iconmelon - Quickly create a library of SVG icons - Web based small tiny app

GlyphSearch

GlyphSearch is an app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.

GlyphSearch - Web based small tiny app

FontAwesome Finder

FontAwesome Finder – Quickly and instantly search FontAwesome icons.

FontAwesome Finder - Web based small tiny app

Fontello

Fontello – Generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .

Fontello - Web based small tiny app

Fontsatic

Fontsatic is a tool for creating custom icon fonts (over 6,000 icons to choose from).

Fontsatic - Web based small tiny app

Clrs

Colors – SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web.

Colors SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web

Pantone Sass

Pantone Sass is a list of Pantone colors as Sass variables.

Pantone Sass A list of Pantone colors as Sass variables

Flat UI Colors

Flat UI colors reference.

Flat UI colors reference - Web based small tiny app

BADA55.io

BADA55.io is an app for finding the most badass leet words for your CSS hex colors.

BADA55.io app for finding the most badass leet words for your CSS hex colors

Comments

  • materialui.co for Material UI Colors !

  • +1 Paul
    Nice list. I liked the CSS beautifier – its pretty neat. CSS formatting is a must have for development time. We can alway minify it for prod launch – but a beautiful looking css is such a relief.

    How about adding color pickers to this list – those are pretty handy too.

  • Nice. It’s helpful for me. Thank you. #amoyshare

  • Federico Totti

    Truly the best tool collection of 2015! Thanks!

  • Just noticed extractCSS is on there twice.