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.SVG – An SVG circular menu generator.
CSS Ruler – A handy web-based tool for exploring CSS lengths.
A useful app to help you visualize the box-model.
One Click Encoding Decoding Tool – A useful app for converting content to ASCII character-set.
SVGOMG – A web-based app for optimizing and configuring SVGO.
Rocket – A simple tool for creating web animations.
Font Library – An open source project to tag and organize Google Fonts.
A super simple Pie Menu Generator.
StyleStats – A small app for collecting statistics on any CSS file.
extractCSS – A tool which can extract ids & classes from HTML documents and output a CSS stylesheet.
CSS Shrink – A small tool for ‘shrinking’ CSS files.
CSSynth – A small app for running animations in order.
EnjoyCSS – A useful tool that allows you to adjust rich graphical styles quickly without coding.
Flexy Boxes – A CSS flexbox playground and code generation tool.
Create CSS3 – A super-simple CSS3 generator.
CSS Beautifier – A tool that will automatically 'beautify' your CSS.
Z-Bugs – A tool to minify and Gzip compress your CSS and JS quickly.
NTH-TEST – A nth-child and nth-of-type tester.
CSS3 Generator – A simple CSS3 generator.
SpinKit – Simple loading spinners animated with CSS.
extractCSS – A tool for extracting ids, classes and inline styles from HTML and outputting them as CSS.
Css2Less – CSS to Less converter.
CSSComb – Sort CSS Properties in a Specific Order.
Daturi – An app for converting images to Base64.
px-em – A PX to EM calculator.
SassMe – An app for visualizing SASS color functions.
typesetwith.me – A web-based typography and legibility sandbox.
Type Scale – A typographical visual calculator.
TypeWonder – A useful tool for testing web fonts on the fly.
Glyphter – A handy tool for creating icon fonts from SVGs.
Perfect Icons – A web based social icon creator.
iconizr – A tool for converting SVG images to a set of CSS icons.
iconmelon – Quickly create a library of SVG icons.
GlyphSearch – An app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.
FontAwesome Finder – Quickly and instantly search FontAwesome icons.
Fontello – Generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .
Fontsatic – A tool for creating custom icon fonts (over 6,000 icons to choose from).
Colors – SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web.
Pantone Sass – A list of Pantone colors as Sass variables.
BADA55.io – An app for finding the most badass leet words for your CSS hex colors.
