65 free tools for web designers and developers

Published by Vic Drover

Tools For Web Designers

Building a modern website requires a large set of skills and expertise in many softwares. Given the costs that can be involved in purchasing numerous suites of software, it’s not surprising that an ecosystem has developed around the production of free tools for web designers and developers.

Below you’ll find our curated list of (mostly) free web design tools that will make building a site faster and less tedious. We have organized the tools in four categories:

Design tools

Color Palettes
Color Palettes
colorpalettes.net

With hundreds of examples, use this tool to pick a balanced color scheme for any website. This is a curated site by a well-known colorist.

Favicon Generator
Favicon
favicon.io

This tool takes the pain out of generating a set of favicons for your website. If you don’t have a logo, it can even create favicons from text or emojis!

Font Awesome
Font Awesome
fontawesome.com

One of the best resources for iconography with lots of free icons available. You can also download PNGs or SVGs of the icons for use in illustrations on your site that match your brand.

Google Fonts
Google Fonts
fonts.google.com

The standard for online fonts, you’ll be able to find solid replacements for many proprietary fonts here. Be sure to enter some sample text if you are trying to match an existing font (like from a logo for example).

Icon Finder
Iconfinder
iconfinder.com

This tool is perfect when you need inspiration for a new icon. This is a huge cache of icons for any occasion. Use the free filter to hide the premium icons in the search results.

Magic Mockups
Magic Mockups
magicmockups.com

This tool is perfect for making your client website preview shine by placing the image in a realistic setting. Little touches like this can really make a good impression at your next client meeting.

Mocqups
Moqups
moqups.com

Wireframes with robust collaboration features help you get layouts approved so you can get one step closer to finishing your next website! The ability to link text and images in one wireframe to another wireframe lets your clients preview the site usability.

Redraw $29
Redraw
stickermule.com/redraw

This very affordable vectorization service can save you hours struggling with low-res logos and other digital assets from your client. There are other services out there, but this is the best we used. Turn around time is typically just a few hours!

Trace
Trace
stickermule.com/trace

This is one of the best background removal tools on the market. You get 3 high-res removals per day for free. Most of the competing services charge a fee to download the full version, so Trace is a winner for occasional use.

Looka
Looka
looka.com

This is the perfect tool when you need a budget logo to get started with a new client. The AI-assisted design tool is a good place to start when a client has little or no assets to provide. Full brand kits are also available (for a fee) and are an easy way to impress clients (especially those on a low budget).

Vecteezy
Vecteezy
vecteezy.com

A great source of vector art with enough variety to suit a wide-range of illustration needs. The vector icon and arrow packs in particular are excellent. Be sure to filter the search results for the free resources.

What The Font
What The Font
myfonts.com/WhatTheFont

Use this tool when you need to recreate a logo from scratch, or to match site fonts to those in a bitmap logo with no font information. If you find the matching font, quick links to purchase or download free alternatives are provided.

Color Hunt
Color Hunt
colorhunt.co

This open color scheme repository is dynamic, user-generated, and absolutely massive. Filtering for new or popular palettes is a great way to get inspired.

Converting Colors
Converting Colors
convertingcolors.com

Sometimes you need to convert from HEX to RBG to CMYK and this tool has you covered. You’ll even get “nearest color” paint suggestions!

PNGWING
Pngwing
pngwing.com

This repository holds one type of image: PNGs with transparent backgrounds. It is very handy for quick design projects or when full vector assets are not available.

Unsplash

In recent years this resource has become the go-to site for royalty-free images. It’s perfect for the budget-conscious client who needs graphics for their site and blog/news items.

Performance and testing tools

Am I Responsive
Am I Responsive
ami.responsivedesign.is

This is a great tool to quickly see if your site is responding well on different screen sizes. Not a replacement for full, multi-device testing though (see BrowserStack).

BrowserStack $19
BrowserStack
browserstack.com

This full-featured cross-browser testing tool will let you select almost any browser, operating system and screen size. Look for the Freelancer plan for the cheapest rate.

Cloudflare
Cloudflare
cloudflare.com

This service can make any website run faster and safer. For details, check out our top four reasons to use Cloudflare.

Dead Link Checker
deadlinkchecker.com

Broken links are bad for your users and for your search engine rankings. Use this tool to spot-check broken links. Click the Full Report link to see the pages containing the broken links.

Down for Everyone
Down For Everyone Or Just Me
link

If you’ve ever asked a friend to check if a site is up or not, then this service is for you. With a single click you’ll know if a site is down for everyone or just you.

Image Recycle
Image Recycle
imagerecycle.com

If you need image or PDF compression on a limited basis, this service is a good fit. Be sure to use the Uploader link to process up to 10 files at once.

GT Metrix
Gt Metrix
gtmetrix.com

One of the original performance tools, you can use GTMetrix as a 1-off scan, or create a free account to save the manual performance scan results over time.

Lighthouse
Lighthouse
link

Lighthouse is the de facto standard for website performance. The useability is not great, but you’ll get lots of actionable tips for improving your website loading time.

Meta Tags Preview
Meta Tags
metatags.io

In a world of social media, this is an invaluable tool for previewing how your site will look when shared online. It’s also great for testing how different images will appear on different social platforms.

Mobile-friendly Test
Mobile Friendly Test
link

The fastest way to be sure that your sites are loading quickly and look as expected on mobile. It also identifies problems like missing or blocked resources that may be affecting the mobile experience.

Search Console
Search Console
link

This is the primary performance tool from Google that monitors your site continually. 404 error detection, sitemap indexing status, top queries, and security issue detection are some of the useful data included.

Sucuri Site Check
Sucuri Site Check
sitecheck.sucuri.net

Website security is always an important topic. This service is a good tool to quickly spot-test the frontend of your site to look for signs of malware/intrusion and to see if your domain has been added to any blacklist sites.

XML Sitemaps
Xml Sitemaps
xml-sitemaps.com

It’s hard to find a free sitemap tool these days, but this one gives you an amazing 500 pages for free! It is really useful for smaller sites, especially when migrating between platforms (run the scan before and after the migration, then compare any URL changes with XML Diff (see below).

Mail Tester
Mail Tester
mail-tester.com

Before you launch a new site, be sure to test all your forms for email deliverability. This tool provides a unique test email address and then analyzes received messages for spamminess. Detailed tips to solve deliverability issues are just fantastic.

Squoosh
Squoosh
squoosh.app

This tool combines a wonderful user experience and AI to quickly compress images with ease. Fine control over the compression algorithm and the number of colors, and a live split-preview of the final compressed image make this a fun and very useful tool.

Security Headers

Adding security headers to your website is one of the easiest ways to protect your website. This tool grades your site based on the security headers it finds. If you don’t recognize the language in the results, simply send the link to the scan results to your host!

Development & coding tools

Browsersync
Browser Sync
browsersync.io

If you’re developing a website in a local environment, this tool will save you tonnes of time bv refreshing your browser automatically when you save an html, css or js file. Add in the ability to refresh simultaneously on many devices and you’ll be creating sites optimized for many screen sizes/types faster than ever.

Can I Use
Can I Use
caniuse.com

This tool is indispensable for checking the cross-browser compatibility of the latest html, css and js attributes. You can even check support for 3rd-party utilities, security protocols and much more. Check the full index to get a feel for everything available or view the entry for the WebP image format as an example.

Closing Tag Checker
Closing Tag Checker
link

With the ever-increasing use of grid layouts, it can be easy to lose track of your DIV tags. This tool will help you locate any unclosed DIVs and other tags that may be messing up your website layout. See also the HTML Formatter (below).

Docker
Docker
docker.com

Many developers prefer to develop locally in a container, a virtual space that isolates all of the parameters of your environment in one place. This makes it easy to work on multiple projects at once without having to change environment variables such as PHP version (for example). See also lando (below).

MAMP
Mamp
mamp.info

An alternative to Docker (above), MAMP makes it easy to configure a local environment on your Mac or Windows PC. Although suited to a single environment, this tool makes switching variables (like PHP version) simple. It also works with BrowserSync (above).

Fillerama
Fillerama
fillerama.io

This is a great tool for creating filler text for your website, handy if your client is slow providing assets! Pick from standard Lorem Ipsum, or choose a TV show theme like Futurama. You can also choose which text elements to include (headings, lists, etc…). See also Placeholder.com for filler images (below).

Font generator
Font Generator
link

This tool is great for discovering unique font pairings from Google Fonts. The random function is quite fun if you don’t know where to start. Once you have selected the fonts, simply copy-paste the css snippets into your site to use the selected fonts.

HTML Formatter
Html Formatter
link

We love this tool for making sense of poorly formatted code as it automatically nests all of the elements. This makes understanding and modifying the code much easier. See also the Closing Tag Checker (above).

Lando
Lando
lando.dev

Lando works with Docker (above) and makes using containers easy. A simple XML file specifies all the attributes of a container (like PHP version, for example). Since the XML file can be committed to your code repository, it can be synced with your colleagues to make collaborative development seamless.

LayoutIt
Layoutit
layoutit.com

If you are using Bootstrap or CSS Grid for your websites, this tool is a great resource. It allows you to visually layout your pages including all the expected elements like buttons and navbars. When done, export the html, css, js and fonts for use in your site and simply insert the dynamic elements from your CMS as desired.

Media query generator
Media Query Generator
simplecss.eu

Writing media queries supporting different devices can be very tedious. This tool makes it fast and easy! You can choose from device classes like smartphones or specific devices such as iPod Touch 4th Gen.

Placeholder
Placeholder
placeholder.com

Generating placeholder images has never been easier. Intuitive URLs (like this one) can be used to make images of any size and color without the need to fire up an image editor like Pixlr (see below).

Redirect Generator
Htaccess Generator
htaccessredirect.net

You’ve modified a URL on your site and now you need to redirect it. Typically this is a rare task: use this tool to get it right the first time.

Regex Pal
Regex Pal
regexpal.com

Whether programming or simply trying to search/replace in your favorite text editor, this tool will make you a master of regular expressions. And it eliminates the guesswork when trying to build a new expression.

VS Code
Vs Code 1
code.visualstudio.com

If you’re coding everyday, you probably want to upgrade to a full-featured IDE and VS Code is a great choice. It’s totally free, cross-platform, and has a large library of extensions to add functionality.

Bootstrap Cheatsheet
Bootstrap Cheatsheet
link

This tool is an interactive list of Bootstrap 5 classes, variables, and mixins. Simply click a class and see example code and output. Especially if you’re used to older Bootstrap versions, this cheatsheet is a great resource for leveling up your bootstrap knowledge.

CSS3 Generator
Css 3 Generator
css3generator.com

With its multi-browser support, CSS3 can be tedious to code by hand. This tool makes it quick and easy to generate CSS3 snippets for use on your web site. It also shows browser support for each CSS selector.

Utilities & other tools

Built With
Built With
builtwith.com

This is a great tool if you’re quoting a client for a migration of an existing site and need to know what technology is being used on the current site. For example, knowing the content management system can be very helpful, but you’ll also get the web server, CDN, web host and even analytics and tracking software!

CloudApp
Cloudapp
getcloudapp.com

This screen capture utility is a must-have tool for web designers on Mac. You can capture images, videos or GIFs, and then annotate and share them from your custom domain. The ability to add your webcam to videos makes this tool perfect for creating walk-throughs for your clients.

Convertio
Convertio
convertio.co

About 10 years ago I stopped installing Microsoft products on my PC. But clients still send copy and other assets from Office applications. This tool lets you convert them if your office application of choice doesn’t support Microsoft natively.

Diffchecker
Diffchecker
diffchecker.com

Most text editors and IDEs like VS Code (see above) allow you to find the differences between two text files. If you don’t have something that does this for you on your desktop, give this tool a try.

GoFullPage
Gofullpage
link

Full page screenshots of websites are surprisingly difficult to make by hand. This chrome extension makes it easy. It’s especially useful for capturing very long web pages. Once a page is captured, you can save it as a PNG or PDF.

Let Me Google That
Let Me Google That
letmegooglethat.com

Only to be used for clients with a good sense of humor, this tool creates a fun animation of someone googling a search term and then showing the results. It’s a great way to send a cheeky little hint to that client that calls you for every little thing! 🙂

ListDiff
Listdiff
link

If you just want to look for a subtle difference between two lists, I’d recommend Diffchecker above. However, this tool not only compares differences between lists, it also shows you what’s the same, different and the full combined list. Little tools like sorting the lists and adjusting the capitalization make it a must-have tool for your web development toolbox.

Passwords Generator
Password Generator
passwordsgenerator.net

Web developers need to create strong passwords all the time. This tool make that task an easy and consistent process. Sending this tool to your clients is a great way to help them improve their password habits as well.

Paste
Paste
pasteapp.io

Clipboard managers are so very useful, and this Mac utility is one of the best. It interprets HEX color codes, can ignore sensitive data, and can even for the Paste command to always paste as plaintext. Critically, you can sync the clipboard across multiple devices.

Pixlr
Pixlr
pixlr.com

Whether you need a cost-effective image editor for occasional or want to provide a similar solution for your clients, this hosted solution is more than capable for day-to-day editing needs.

Tabelizer
Tableizer
tableizer.journalistopia.com

This tool is extremely useful. Paste in data from a spreadsheet to instantly generate an HTML table. It’s also useful if you need to strip classes and inline styles from an existing HTML table.

Upwork
Upwork
upwork.com

There are lots of sites that will help you hire freelancers or other part-time staff. We like Upwork a lot. The job creation, recruiting, and hiring processes are intuitive and top-notch.

Web Hosting Detector
Web Hosting Detector
webhostingdetector.com

If you just need to know who is hosting a site without all the other information that Built With generates, this tool is a perfect choice.

XML Diff
Xml Diff
link

Above we listed two other solutions for comparing data, but this tool deserves a special shout out. We use it to compare the output from XML Sitemaps (above) before and after a website migration. It’s a handy way to identify changed URLs that need redirection, or to find any content missing on the new site.

Zapier
Zapier
zapier.com

Connecting your website to the rest of your business and workflows can be a difficult task: Zapier makes it easy. From updating Slack when a support ticket arrives to creating a Trello card when a new version of WordPress is released, the sky is the limit when it comes to connecting services and making custom workflows for your agency (all without any coding!).

dlvr.it

Automatically posting new content to social media can save a lot of time, especially for bust creators. This tool has a great free tier and can pull content from your website’s RSS feed and other trusted content sources. Bonus: WordPress is natively supported and a Chrome extension is included for sharing off-site content.

Your free tools for web designers

We’d love to hear about the free web design tools you use when making websites. Feel welcome to post them in the comments below.

If they overlap those listed above, please be sure to describe what makes your choice stand out of the crowd.


8 Comments

Anna Robinson · August 26, 2021 at 3:59 AM

Super resource! Thank you 👍🏽😊🙏🏽

    Vic Drover · August 26, 2021 at 7:34 AM

    You are very welcome! Anything you use that we missed?

      Anna Robinson · August 26, 2021 at 8:05 AM

      Maybe have a look at these and se what you think. I couldn’t live without them 😊

      raindrop.io https://raindrop.io/
      To have access to my bookmarks from everywhere.

      TextExpander https://textexpander.com/
      For easy access to my snippets. Not free though.

      Unsplash https://unsplash.com/
      For royalty free images

      Drafts https://getdrafts.com/
      Where I write down everything. (A lot more features than standard note taking apps.)

        Vic Drover · August 26, 2021 at 8:20 AM

        Very cool! Do you use drafts to write for the web? If so, how do you convert from markdown to html?

marcelo aguirre · August 13, 2021 at 3:36 PM

muy util, sobre todo el capturador de pantallas

    Vic Drover · August 13, 2021 at 8:14 PM

    “very useful, especially the screen capturer”

    CloudApp is fantastic. I think I purchased an unlimited account of the paid version a few years ago!

alex · August 13, 2021 at 1:31 PM

please add 🙂
http://css3generator.com/

    Vic Drover · August 13, 2021 at 1:59 PM

    That’s a great one! Will add for sure.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *