30 Web Based Tools and Apps for Web Designers

Here in this post I have collected a variety of web based tools and applications that were built to help web designers with a specific solution and act as time savers. These tools might or might not be well known or be the most powerful tools or apps, but they are really useful and can save a lot of time.

Get ready to bookmark, because you’ll find apps to help you create calculations, icon-fonts, backgrounds, color schemes, apps to help u calculate elements width in % from PXs and a lot more.

px-em is a px to em tool which allows you to work out the em sizes from px.



Create CSS3 – A super-simple CSS3 generator.

Create CSS3

Mockplus RP is a non-coding required tool for creating a website or mobile app prototype.

Mockplus RP

Responsive Wireframes – Quickly create and share RWD wireframes.

Responsive Wireframes


Responsive Test – Test responsive web design in various resolutions



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



Random User Generator – A free API for generating random user data. Like Lorem Ipsum, but for people.

Random User Generator   API


FontAwesome Finder – Quickly and instantly search FontAwesome icons.

FontAwesome Finder


typesetwith.me   A typography and legibility sandbox



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

CSS Beautifier


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

Really Quick Responsive Web Design Calculator


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



Contrast Ratio – A tool to calculate color contrast ratios.

Contrast Ratio


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



SpinKit – Simple loading spinners animated with CSS.

SpinKit   Simple CSS Spinners





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

Red Pen


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

Fontello   icon fonts generator


OverAPI – Collecting all the cheat sheets in one place.

OverAPI.com   Collecting all the cheat sheets


Flat UI colors reference.

Flat UI Colors


Material Palette – Material Design Color Palette Generator]

Material Design Color Palette Generator   Material Palette


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

extractCSS   Online CSS Extractor


A handy web-based web developer checklist.

Web Developer Checklist


CSS3 Click Chart CSS3 Browser Support and Information

CSS3 Click Chart


Patternizer – Stripe Pattern Generator Tool
Patternizer   Stripe Pattern Generator Tool



HTML5 Boilerplate  The web’s most popular front end template

HTML5 Boilerplate


XRAY  for web developers

XRAY    for web developers


Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.



Opera Mobile Emulator, Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging.



CodeAnyWhere Collaboration platform for developers



Daturi  Convert images to Base64

Daturi   Convert images to Base64


SassMe – An app for visualizing SASS color functions.



iconmelon – Quickly create a library of SVG icons.


I hope this list of Web Based Tools and Apps for Web Designers helps you find some new apps to extend your bookmark collection. Let me know in the comments below which are your favorite apps and tools!