40 Tiny Web-Based 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.SVG – An SVG circular menu generator.
CIRCULUS.SV SVG circular menu generator

CSS Ruler – A handy web-based tool for exploring CSS lengths.
CSS Ruler  handy web-based tool for exploring CSS lengths

A useful app to help you visualize the box-model.
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.
A useful app for converting content to ASCII character-set

SVGOMG – A web-based app for optimizing and configuring SVGO.
SVGOMG  web-based app for optimizing and configuring SVGO

Rocket – A simple tool for creating web animations.
Rocket

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

A super simple Pie Menu Generator.
A super simple Pie Menu Generator

StyleStats – A small app for collecting statistics on any CSS file.
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.
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.
CSS Shrink a small tool for shrinking CSS files

CSSynth – A small app for running animations in order.
CSSynth A small app for running animations in order

EnjoyCSS – 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 – A CSS flexbox playground and code generation tool.
Flexy Boxes  CSS flexbox playground and code generation tool

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

CSS Beautifier – A tool that will automatically 'beautify' your CSS.
CSS Beautifier - Web based small tiny app

Z-Bugs – A tool to minify and Gzip compress your CSS and JS quickly.
Z-Bugs - Web based small tiny app

NTH-TEST – A nth-child and nth-of-type tester.
NTH-TEST - Web based small tiny app

CSS3 Generator – A simple CSS3 generator.
CSS3 Generator - Web based small tiny app

SpinKit – Simple loading spinners animated with CSS.
SpinKit - Web based small tiny app

extractCSS – A tool for extracting ids, classes and inline styles from HTML and outputting them as CSS.
extractCSS - Web based small tiny app

Css2Less – CSS to Less converter.
Css2Less - CSS to Less converter

CSSComb – Sort CSS Properties in a Specific Order.
CSSComb - Sort CSS Properties in a Specific Order

Daturi – An app for converting images to Base64.
Daturi - An app for converting images to Base64 - Web based small tiny app

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

SassMe – An app for visualizing SASS color functions.
SassMe - An app for visualizing SASS color functions - Web based small tiny app

typesetwith.me – A web-based typography and legibility sandbox.
typesetwith.me - Web based small tiny app

Type Scale – A typographical visual calculator.
Type Scale - Web based small tiny app

SVGeneration.
SVGeneration - Web based small tiny app

TypeWonder – A useful tool for testing web fonts on the fly.
TypeWonder - Web based small tiny app

Glyphter – A handy tool for creating icon fonts from SVGs.
Glyphter A handy tool for creating icon fonts from SVGs

Perfect Icons – A web based social icon creator.
Perfect Icons A web based social icon creator

iconizr – 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 – Quickly create a library of SVG icons.
iconmelon - Quickly create a library of SVG icons - Web based small tiny app

GlyphSearch – An app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.
GlyphSearch - Web based small tiny app

FontAwesome Finder – Quickly and instantly search FontAwesome icons.
FontAwesome Finder - Web based small tiny app

Fontello – Generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .
Fontello - Web based small tiny app

Fontsatic – A tool for creating custom icon fonts (over 6,000 icons to choose from).
Fontsatic - Web based small tiny app

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 – A list of Pantone colors as Sass variables.
Pantone Sass A list of Pantone colors as Sass variables

Flat UI colors reference.
Flat UI colors reference - Web based small tiny app

BADA55.io – 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

(639 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter, Facebook or Google+.

Comments