Hello everyone, hope you are doing great! In this short article, I am writing about 6 free tools that save me a lot of time when I am building websites. I hope you will also find these tools helpful. let's get into the article.

1. Type Scale

Do you often struggle to define the perfect font sizes for your elements? If yes then this is the perfect tool for you.

All you have to do is add your base font size once you do that this tool will generate different font sizes for different elements.(H1,H2,H3 etc.)
Also, you can select different fonts from google fonts and try different scales for your font size.

The best feature of this tool is you can literally copy the CSS generated according to your choices and paste it into your CSS file. It also imports the font you selected and sets the font-family for yourhtml`. Then you don't have to define font sizes everywhere!

2. Happy Hues

If you don't understand how to apply color palettes to your web designs then this is a great place to start.

This tool not only shows amazing color palettes but also acts as a real-world example of how the colors could be used in your design projects.

It shows, which colors to use for which elements and also how to use colors in your illustrations so that the illustrations match your design.

3. Fontjoy

This tool simply generates font pairs that you can use in your designs. You can choose the contrast you want and hit generate to get font pairs that go together well.

4. CSS Peeper

CSS Peeper is a chrome extension that you can use to inspect styles from different websites in a well-organized and beautiful way. It organizes the colors, fonts used in the website. Also, if you like a certain element on a webpage you can get all the CSS used for creating that element.

5. avataaars generator

With this tool, you can generate amazing avatars to use in your designs. There are multiple styles to choose from and you can export the avatar in different formats like png, SVG, and also you can get react code or image link directly. All for free!

6. brumm.af

With this tool, you can create amazing box shadows. You can add multiple layers to your shadows and adjust every part of it to create awesome-looking smooth shadows.!

Hope you find this article useful. If you did then please share it and also you can follow me on Twitter @devggaurav

Thank u so much for reading! 😀