The best free web design tools

As web designers and developers, we love to use tools that make our life easier when working on new sites.

And as we all know, (almost) all the best things in life are free.

Therefore, we collected the best free tools for web design and development that will improve your workflow and help you get stuff done faster!

Figma: Collaborative Mockup & Prototyping platform

Is there really a web designer on the planet who has not heard of Figma?

This collaborative design platform is the starting point for countless web design projects and if you aren’t using it yet, check it out right now!

Figma lets you create responsive mockups, MVPs, click dummies, and wireframes with ease.

You can even animate your sites and create clickable prototypes in minutes using the drag-and-drop builder.

Best part about it? Figma is entirely free without limitations for users with up to 3 different projects.

Once you grow your team and need space for more projects or different clients, you need to upgrade to a paid subscription.

Canva: Easily create design and social media assets

Canva is a design platform that lets you easily create images, designs, lead magnets, and digital assets within minutes and without photoshop skills.

The platform is completely free and hosts a super large number of pre-made designs and templates for countless use cases.

I especially like the social media ones which I regularly use on my accounts, as well as the ones for lead magnets.

For example, you can create an entire ebook of up to 100 pages using one of the templates on canvas, including stock images…all completely for free!

The Pro subscription is also dirt cheap at less than $10 a month when you pay for the whole year at once.

It unlocks the super cool image background remover feature, many more design templates and premium stock images, among a lot of other great features.

Fontjoy: Font Pairing made easy

Fontjoy helps you to easily find font type pairs for your websites completely for free.

It either generates a fitting pair on the click of a button or allows you to choose one of your choice and Fontjoy does the rest to find fonts that fit.

Super convenient!

There are also no upsells and it just works out of the box.

Squoosh: Compress and change images into any format

Squoosh is a free image compressor and converter which lets you upload any image and then export it in any format you desire.

It has a visual interface so that you can do any resizing, compressing and converting right in the browser before exporting.

This way you can optimize your images before uploading them to your site without sacrificing image quality.

I use it every day in my projects and it’s a huge time and money saver!

It also supports new file formats such as WEBP and MozJPG at no extra charge.

Box Shadow Maker

Use shadow.brumm.af to create cool box shadows for your next web design project.

Among other things, you can select the shadow layers, transparency, and spread to customize your box shadow and use the copy to clipboard function to paste it right into your project.

Fluid Typography Calculator

Fluid typography has become the new and arguably best way to quickly make all your font-sizes responsive without needing multiple CSS media queries.

The responsive font calculator by Websemantics is one of the best ways to quickly create CSS rules for all your text elements.

Type in the minimum and maximum font sizes you want on your site, select whether you want the output in px, REM, or EM values, and copy the result in your CSS stylesheet.

Email Address Encoder

Encoding your email address on your website is really important to prevent spam and phishing emails.

While some website builders and content management systems like WordPress have tools included that do the job, you can also encode your email address manually.

The Email Address Encoder does just that and more. It can be used for emails, phone numbers, names, and anything else based on plain text strings.

PALX: Automatic Color Palette Generator

Provide a single color value and Palx returns a full-spectrum color palette, well suited for UI design and data visualizations that work harmoniously with brand colors.

The URL is a bit strange, but it’s a trustworthy tool and will help you create great designs quicker.

CSS Gradient Animator

The CSS gradient animator does exactly what the name suggests.

It creates CSS animation rules based on the input you select.

Clippy: Free CSS clip pather maker

The clip-path property in CSS allows you to create complex shapes without using images.

Clippy is an easy-to-use, free tool that allows you to create shapes using a visual interface and export them as CSS rules.

There are more than 20 base shapes to choose from and you can then go on to modify them as needed.

Undraw: Free SVG illustrations

Undraw.co is great open source project that gives you tons of free svgs with royalty-free access for your next project.

You can pick the illustration and even adjust the colors used in it before downloading the asset completely free.

Google Pagespeed: Measure your website’s performance

Google itself hosts a few invaluable free tools that all web designers and web developers should use.

Optimizing your page speed is super important to create a good user experience and make your website load fast.

Google Pagespeed analyses your site and gives you actionable advice on how you can improve it.

Brokenlinkcheck

Broken links are annoying and can hurt your SEO score.

Brokenlinkcheck.com is a site that does one thing extremely well: It checks your site for 404 and other server errors and gives you a nice list of results, as well as the exact source where the broken link occurred.

It’s especially helpful when you want to move a site from one server to another or change the domain of your business.