All released this year, each of these free web-based apps offers 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, 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 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.
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.
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.
- Top 10 Bug Tracking Tools for Web Developers and Designers
- 10 Best Time Tracking & Invoicing Apps for Agencies & Freelancers
- 5 Fantastic Sketch App Tools Every Designer Should Use
- 25 Free Color Tools, Apps and Palette Generators
- 20 Lightweight and Free Markdown Editors & Tools
- Useful Tools To Boost Your SVG Workflow
- A Touch of Neon in Web Design: Using Color to Draw a User’s Attention
- The Grumpy Designer’s Ode to Troubleshooting