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! 😀
Top comments (28)
Font Joy + Happy Hues, the perfect combination. Thanks for the share.
Yes 💯
Yeah. You may want to add FontAwesome to the list too. I've learnt about it from Danny Thompson tutorials video. Thanks @devggaurav . This is great 👍
Yea fontawesome is also nice. I used to use it but now i use boxicons and css.gg icons. Check it out U might also like these. Thank u😊
Sure to check it out right away. Thanks man 😊
Nice some of these are new to me I wish I had known them before.
You sir are sharing gold! Thank you for the links ❤️
Thank u man!😅
Amazing post
thank u!
thank you, very helpful!
These are some useful resources!
Smart 🤓🤓
Awesome
Thank u
Awesome!!
Much better than my article, haha 😅
I am testing the CSS Pepper right now and I will definitely use brumm.af at some point, so I saved it here in the bookmarks.
Thank u so much man!😊 Also check out my earlier article on the same topic. U might find something useful there as well😅