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.
Book Your SmashingConf New York Tickets Now!
Get $100 discount off SmashingConf New York tickets with promo code SmashinglovesSpeckyboy
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.
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.
Type Terms is an online tool for learning the basics of typographic terminology.
glyphdiff is a simple tool for comparing the differences between two fonts.
ColorDrop is a curated collection of amazing color combinations.
Palettable is a web-based app for generating beautiful color palettes.
Impalette is a web-based tool that scans your images for dominant pantone colors.
Material Palette is a Material Design color palette generator.
Brands in Colours is a simple color reference for your projects using SASS variables.
Web-Based CSS Tools
Based on the CSS flexbox specification, Flex Layout Attribute is a useful HTML layout helper.
CSS Stats is a web-based application that visualizes various stats about your stylesheets.
img2css is a super-simple tool for converting any image to pure CSS.
Pixel Art to CSS is a web-based, React.js powered, pixel art drawing tool.
cssFilters.co is a small playground for creating custom CSS photo filters.
Blend is a tool for generating simple CSS3 gradients.
Filter Blend is a CSS blend modes and filters playground & generator.
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.
embedresponsively.com is a web-based app that helps build responsive embed codes for third-party media.
Responsive Image Breakpoints Generator is a handy tool from Cloudinary for generating the optimal responsive image dimensions.
Web Performance Tools
PerfTool is a handy tool that collects detailed info about your site and displays it on an easy-to-read dashboard.
Performance Budget Builder Tool is a small tool created by Brad Frost for planning and making your own web project performance budget.
Hookbin is a free web service that allows you to collect, parse and view HTTP requests.
Online Checklists, Guides & References
Security Guide for Developers is a practical checklist for preventing security issues.
Web Designer’s Checklist App is a simple tool for managing all of the tasks of aweb project.
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.
Photopea Photo Editor is a web-based photo editor for editing Photoshop files quickly and easily.
Jpeg.io – Convert any major image format into a highly optimized JPEG.
BSE64 is a tool for encoding images into BASE64.
SVGOMG is a web-based app for optimizing and configuring SVGO.
Iconogen is a web-based tool for quickly generating favicons, Android and iOS icons.
Handy Directories for Web Designers
Sketchpacks – Sketch.app plugin registry and directory.
PostCSS.parts – A searchable catalog of PostCSS plugins.
UIDB.io – A collection of specific UI and design examples.
Good Copy – Examples of email copy from some of the biggest businesses in the world.
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.
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.
Grid.Guide is a small tool to help create pixel perfect grids within your designs.
CreateBrief is a tiny and super-easy to use web-based tool for creating basic design briefs.
Launchaco is a handy tool for instantly searching domains, social media handles and logos.
ViewedIt is a free tool for recording and sharing your screen, and you will instantly know when people are watching.
Site Auditor is a small tool for finding, fixing and optimizing your site for search engines.
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.
JSON Editor is a web-based tool for viewing, editing, formatting, and validating JSON.