50 Tiny, Time-Saving, and Free Tools for Web Designers for 2017

All released this year, each of these free web-based apps offer a time-saving solution to many of the web design tasks you will need to perform from time to time. Without ever having to install anything, all you have to do is bookmark and save them for that day when they will be called upon.

Some of these tiny time-savers will help to manage the performance budget of a project, organize code snippets, create professional design briefs, generate CSS animations, or even give detailed stats about CSS stylesheets. Whatever the time-saver you’re looking for, the chances are you will find them here.

We’ve categorized all of the apps and tools into: Web Typography Tools, Color Tools, CSS Tools, Responsive Web Design Tools, Web Performance Tools, Checklists & Guides, Image Tools & Editors, Handy Directories, and finally a bunch of uncategorizable Miscellaneous Tools.

You might also find this collection of free web-based apps from 2014 useful as well.

Web Typography Tools

Type Anything is a creative tool for testing and creating the perfect typography setup for your site.
TypeAnything perfect typography setup test create

Type Nugget is an online typesetting tool for generating beautiful, bulletproof CSS in the browser.

Megatype is a small tool for executing typographic structure with ease.
Megatype Execute typographic structure with ease

Type Terms is an online tool for learning the basics of typographic terminology.
Type Terms learning basics typographic terminology

glyphdiff is a simple tool for comparing the differences between two fonts.
glyphdiff simple tool for comparing the differences of two fonts

Color Tools

ColorDrop is a curated collection of amazing color combinations.
ColorDrop curated collection of amazing color combinations

Palettable is a web-based app for generating beautiful color palettes.
Palettable web-based app generating beautiful color palettes

Impalette is a web-based tool that scans your images for dominant pantone colors.
Impalette web-based tool that scans your images for dominant pantone colors

Material Palette is a Material Design color palette generator.
Material Palette Material Design color palette generator

Simple Flat Colour Selector.
Simple Flat Colour Selector

Brands in Colours is a simple color reference for your projects using SASS variables.
Brands in Colours simple color reference SASS

Web-Based CSS Tools

Based on the CSS flexbox specification, Flex Layout Attribute is a useful HTML layout helper.
Flex Layout Attribute HTML layout helper based on CSS flexbox specification

CSS Stats is a web-based application that visualizes various stats about your stylesheets.
CSS Stats web-based application that visualizes various stats about your stylesheets

img2css is a super-simple tool for converting any image to pure CSS.
img2css super-simple tool converting image pure CSS

CSS vs. JS is a web-based comparison tool for selecting elements using either CSS or JavaScript.
CSS vs JS Select Elements

Pixel Art to CSS is a web-based, React.js powered, pixel art drawing tool.
Pixel Art CSS ReactJS-powered drawing web-based application

cssFilters.co is a small playground for creating custom CSS photo filters.
cssFilters.co custom CSS photo filters

Blend is a tool for generating simple CSS3 gradients.
blend Tool generating simple beautiful CSS3 gradients

Filter Blend is a CSS blend modes and filters playground & generator.
Filter Blend CSS blend modes filters playground

You might also like to take a look at the Top 50 CSS Tools from 2015.

Responsive Web Design Tools

Resizer is a web-based viewer for testing how digital products respond to Material Design on all devices.
Resizer viewer test digital products respond Material Design devices

embedresponsively.com is a web-based app that helps build responsive embed codes for third-party media.
embedresponsively build responsive embed codes third-party media

Responsive Image Breakpoints Generator is a handy tool from Cloudinary for generating the optimal responsive image dimensions.
Responsive Image Breakpoints Generator

Web Performance Tools

PerfTool is a handy tool that collects detailed info about your site and displays it on an easy-to-read dashboard.
PerfTool

Performance Budget Builder Tool is a small tool created by Brad Frost for planning and making your own web project performance budget.
Performance Budget Builder Tool

Hookbin is a free web service that allows you to collect, parse and view HTTP requests.
Hookbin web service collect parse view HTTP requests

Online Checklists, Guides & References

Security Guide for Developers is a practical checklist for preventing security issues.
Security Guide Developers checklist preventing security issues

Web Designer’s Checklist App is a simple tool for managing all of the tasks of aweb project.
Web Designers Checklist App designer news

Image Tools & Editors

Vectr is a free graphics editor used to create vector graphics easily and intuitively.

Visual Center is a tool that will find the visual center of your images.
Visual Center tool find visual center images

Photopea Photo Editor is a web-based photo editor for editing Photoshop files quickly and easily.
Photopea Photo Editor web-based photoshop psd

Jpeg.io – Convert any major image format into a highly optimized JPEG.

BSE64 is a tool for encoding images into BASE64.
BSE64 encoding images into BASE64

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

Iconogen is a web-based tool for quickly generating favicons, Android and iOS icons.
Iconogen generating favicons Android iOS icons

Handy Directories for Web Designers

Sketchpacks – Sketch.app plugin registry and directory.
Sketchpacks new Sketch app plugin registry directory

PostCSS.parts – A searchable catalog of PostCSS plugins.
PostCSS.parts searchable catalog of PostCSS plugins

UIDB.io – A collection of specific UI and design examples.
UIDB.io collection of specific UI and design examples from around the web

Good Copy – Examples of email copy from some of the biggest businesses in the world.
Good Copy Email Copy Examples From Great Companies

Miscellaneous Tools

Codepad is a handy tool for organizing and sharing code snippets.

Sharingbuttons.io is small web-based tool for quickly generating social sharing buttons with a tiny performance footprint.
small web-based tool for quickly generating social sharing buttons

DNS Lookup – Free tool that will perform a deep DNS lookup of any URL.

RandomKeygen – A mobile-friendly online tool for generating keys and passwords.

JSONCompare – JSON tool that allows you to directly input and validate code, upload multiple files simultaneously, and compare and merge two objects.

JSCompress – A JavaScript compressor that allows you to compress and minify JS files by up to 80%.

Grid.Guide is a small tool to help create pixel perfect grids within your designs.
grid guide tool to help you create pixel perfect grids within your designs

CreateBrief is a tiny and super-easy to use web-based tool for creating basic design briefs.
CreateBrief web-based tool for creating basic design briefs

Launchaco is a handy tool for instantly searching domains, social media handles and logos.
Launchaco handy tool instantly search domains social media handles logos

ViewedIt is a free tool for recording and sharing your screen, and you will instantly know when people are watching.
ViewedIt free tool recording sharing your screen

Site Auditor is a small tool for finding, fixing and optimizing your site for search engines.
Site Auditor

Hero Patterns – A Collection of Repeatable & Customizable SVG Backgrounds.

Word HTML is a free online Word to HTML converter with built-in code cleaning features.
converter code clean word html

JSON Editor is a web-based tool for viewing, editing, formatting, and validating JSON.
converter code clean word html

…and finally…

Web Design in 4 Minutes.
Web Design in 4 Minutes

(533 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.

Comments