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 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!

  • Linkedin
  • Twitter
  • Whatsapp

We make your web projects come true

We develop web applications that help companies achieve faster and more accurate results.
  • Código sólido y escalable.
  • Totalmente responsive.
  • Rendimiento optimizado.

Let's work together!

We are in Madrid, but we can work with you wherever you are. Tell us about your project and we will be happy to schedule a call or video call to discuss it in more detail. Without obligation.

Contact us
Financiado por la Unión Europea - Next Generation
Instituto para la Diversificación y Ahorro de la Energía
Plan de Recuperación, Transformación y Resiliencia
We're okb, an independent & <multi__disciplinary> digital studio