In this post we have collected a varied assortment of tiny web-based apps and tools that have been built with the purpose of solving a specific solution and act as precious time-savers for web designers. They are those tools that may not be very well known, are not the most powerful of apps, but are really useful and do serve their purpose extremely well.

You will find apps that will help you to create icon-fonts, calculators for working out an elements width in % from PXs, apps that will allow you to create beautiful typography, tools for validating and sorting your CSS, super-simple editors, resources for quick reference, sprite generators, PSD validators, Base64 converters… and much, much more.

Get ready to start bookmarking…

Daturi – An app for converting images to Base64.

px-em – A PX to EM calculator.

PSD Validator – Tool to find out how well your PSD files are structured.

Create CSS3 – A super-simple CSS3 generator.

SassMe – An app for visualizing SASS color functions.

Responsive Wireframes – Quickly create and share RWD wireframes.

iconmelon – Quickly create a library of SVG icons.

GlyphSearch – An app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.

Raw – An app for createing custom vector-based visualizations on top D3.js.

Random User Generator – An API that offers you a randomly generated user.

uinames – A simple tool to generate names for use in your mockups.
0

FontAwesome Finder – Quickly and instantly search FontAwesome icons.
1

typesetwith.me – A web-based typography and legibility sandbox.
2

Type Scale – A typographical visual calculator.
3

Contrast Ratio – A tool to calculate color contrast ratios.
4

CSS Beautifier – A tool that will automatically ‘beautify’ your CSS.
5

RQRWD – A calculator for working out elements width in % from PX.
6

Z-Bugs – A tool to minify and Gzip compress your CSS and JS quickly.
7

Iconogen – A tool to for generating favicons, Windows 8 Tiles and iOS7 icons.
8

MQtest.io – An app to identify which media queries your device responds to.
9

NTH-TEST – A nth-child and nth-of-type tester.
0

11h Re-Size – A tool to check web designs against available screen resolutions.
1

CSS3 Generator – A simple CSS3 generator.
2

SpinKit – Simple loading spinners animated with CSS.
3

SVGeneration.
4

A handy web-based web developer checklist.
5

Makeappicon – A tool for generating app icons of all sizes.
6

Red Pen – An app for uploading your design and getting live feedback.
7

TypeWonder – A useful tool for testing web fonts on the fly.
8

Editor – The simplest Markdown editor ever!.
9

Clipping Magic – A handy tool for removing image backgrounds.
0

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

OverAPI – Collecting all the cheat sheets in one place.
2

Flat UI colors reference.
3

Unicode character table.
4

Fontsatic – A tool for creating custom icon fonts (over 6,000 icons to choose from).
5

JSHint – A tool to detect errors and potential problems in JS.
6

extractCSS – A tool for extracting ids, classes and inline styles from HTML and outputting them as CSS.
7

SpritePad – Create and edit CSS sprites.
8

Css2Less – CSS to Less converter.
9

CSSComb – Sort CSS Properties in a Specific Order.
0