Hey everyone! I've been building up a small bookmark folder of tools and generators for web design. I thought I'd go ahead and list them all for others. If you know of some more little tools like this please share! I'd love to add more to my list. This list is in no particular order and they are all great! I will keep adding to this list as I find more.

FontPair

FontPair lists tons of good options for font pairings (Heading and Text). It's especially great if you know what you want to use for one of your fonts but aren't sure about the other. You can search "Montserrat" for example and it will show you a bunch of good pairings to go along with it.

Canva

Canva is also a tool for finding font pairs. Just insert the font you're working with and it will give you options to go with it.

Type Scale

Type Scale helps you decide the appropriate sizes for your text and headings. You can select your font, base font size, and the scaling ratio you'd like to use then it will automatically generate all your heading sizes in em units based on your selections.

Brumm

Brumm is a tool for generating beautiful multilayer shadows. These shadows look much more natural than the standard one layer box-shadow and can really step up the design of a web page.

PALX

PALX helps you generate a color palette based off of a single color. Basically, if you have one color picked, you can input that and it will give you a bunch of colors that go well with it. Select a few and you've got your pallet!

Coolors

Coolors is a color palette generator as well, but generates random color palettes instead.

uiGradients

uiGradients is exactly what it sounds like. It's basically a big list of colors that go well together mashed up into gradients. Most of them are two colors but some go as high as four colors.

Gradient Animator

Gradient Animator is pretty self-explanatory as well. Based on a few settings and some colors it will generate all the CSS you need for a beautiful animated gradient.

Bob Ross Lipsum

Bob Ross Lipsum is a fun little twist on the usual Lorem Ipsum. It's basically just Lorem Ipsum but with Bob Ross-isms. It's fun to change it up sometimes!

Techsini

Techsini has a few other tools on their site, but my favorite is the Multi-Device Website Mockup Generator. It creates those mockups you see on a ton of web design pages that show a website or app on a bunch of different screens like a pc monitor, tablet, phone, etc. You just input the URL of a site and it loads up iframes of the site in a mockup that you can screenshot and use on your site!

SizyMyImage

SizeMyImage is an all-in-one image scaler, compressor, and file converter that can process several images at a time. It's a nice simple website with a nice design and great UX.

ShapeDivider

ShapeDivider is an awesome tool for easily creating SVG shape dividers of several types. You can choose from types like waves, curves, triangles, arrows, etc then adjust some sliders to get them exactly how you want them. Super easy way to make something that's normally quite complicated!

SVG Backgrounds

SVG Backgrounds is another pretty self-explanatory one. It's a tool for generating some cool SVG backgrounds. They are a premium service, but they do offer quite a few free options as well so it's still worth checking out if you're not looking to spend anything!

ConvertICO

ConvertICO converts PNG files into ICO files which you can use for the favicon of your website.

Thanks for reading and please let me know if you know of any other little tools worthy of this list! I'd absolutely love to add more to my bookmark collection.