Insights
Online tools for web designers
From fundamental elements for a web design (such as images, icons or typographies) to CSS code generators passing through measurement converters or validators. Design tools help us with some of the most common tasks when creating websites and the Internet is full of them. Here are some of our favorites: we have chosen them because they are free, well designed and very useful.
1. Unsplash
Can you imagine a catalog with thousands of high quality, high resolution images? Can you imagine them being free of copyright? Can you imagine they were totally free? Well stop imagining and visit Unsplash.
2. Compressor
Did you know that the weight of images greatly affects the loading of your web pages? It’s responsible for about almost half the load time. With Compressor you can significantly reduce the kilobytes of your images without losing a drop of quality. Thus your site will load faster and your users will be happier.
3. Squoosh
Speaking of optimizing the weight of your images: have you tried replacing traditional JPG and PNG files with much lighter new formats? At Squoosh you can convert your photos to WebP and AVIF easily. Still don’t know the benefits of working with this type of files? Check out our article ‘WebP and AVIF, the new image formats you should use on your website’ where we explain everything to you.
4. Coolors
A good color palette is an indispensable element to give personality to your websites. With Coolors you can create your own color palettes for your projects or if you prefer be inspired by those that other designers have already created. Simple but very useful.
5. Color Contrast
In addition to being striking, your websites have to be accessible. Ensure that your texts are legible for everyone and that they comply with WCAG recommendations is very simple thanks to online tools like Color Contrast. Simple, elegant and useful. What more can you ask for?
6. Lorem Ipsum
LoremIpsum.io is one of the many online fake text generators that exist on the Network, although due to its design it is undoubtedly our favorite. This tool provides us with the necessary amount of text to fill our designs pending the final texts and it does so from the famous passage Lorem ipsum, a fictitious text that has been used in the typographic industry since the 15th century.
7. Google Fonts
With more than a thousand totally free fonts, the typographic catalog of Google Fonts is a paradise for graphic designers. All typefaces can be used freely, both by downloading them directly and by using them on your website through Google’s CDN. Now the hard part is deciding among so many!
8. CSS Gradient
This website allows you to create color gradients in a very intuitive way: you just have to drag the cursors to create the perfect composition and automatically you will have the CSS code to copy and use on your website.
9. Smooth Shadows
Based on the same concept of CSS Gradient Smooth Shadows is a free online tool that serves to create elegant shadow effects in CSS.
10. Easings
Easings is a collection of elegant transitions for your animations with CSS. You can choose from already created animations or dare to design your own using Bézier curves.
11. Page Speed
Do you think your pages load fast enough? Can you do something to improve them? Find out the answer with Page Speed Insights the Google tool that every developer should use. Enter a URL and you will automatically get a load speed score for that site, in addition to a list of suggestions to make your website run like an arrow.
12. Can I Use?
New advances in HTML or CSS that facilitate the design of web pages constantly appear. However, they cannot always be used calmly, as these improvements are not implemented at the same time in all web browsers. Can I Use? provides updated compatibility data for front-end technologies with different web browsers, both desktop and mobile devices. Really useful.
13. Neko Calc
Although it may seem very simple, transforming measurements from pixels to rems and vice versa sometimes is a real torment. Forget about the rule of three with this tool that works like a simple calculator.
14. Pattern Pad
This website is ideal if you want to give an original touch to the backgrounds of your websites with fun geometric patterns. You can also use it for your presentations or even for your social media posts.
15. Icon Monstr
If you need a simple icon library, at Icon Monstr you will find a complete collection of them totally free. You can download them in vector format and you can also use them on your websites as fonts.
Did you find this post interesting? Share it!
Your contacts will like to read it, for sure!
