There are so many incredibly useful online tools on the web these days, just lying around for free. And with CSS Tricks recently posting an article about lots of the neat helper sites, I thought I’d share a few of my favorite online resource as well, that help me (and others) design at warp speed. I won’t be covering common ones like Dropbox or tools from the big three. The tools in each list are ordered by frequency of my personal usage.

Design tools

There are lots of tedious task or design needs that require expertise. It can be fun to tinker, but usually it’s best to just one-click-and-nail-it.

• Mockaroo – Generate CSVs, JSON files, Excel docs of randomized data from a huge selection of dummy data. Great for dummy data in design systems.
• Type-Scale – Generate visual content hierarchy with content rules
• Ceasar – How I generate complex CSS easing code. Modified Quint FTW.
• Colorzilla – Even now, I can never remember the exact code for CSS gradients. I’m sure there are better resources, but I use this one most.
• Brumm – Making beautiful, smooth shadows in CSS. Don’t add too many steps, or you’ll have a performance nightmare on your hands.
• Adobe Color – Make color palettes quickly using design rules
• Colorbox – Design your color steps for design tokens
• Bennett Feely – Make your own custom CSS clip paths for imagery on the web
• Netfront – Converting RGB or HEX to Pantone

Media

It’s usually just easier to take existing work and modify it for your needs. Grab it and go (and attribute, even if not asked to).

• Unsplash – You probably already know this one. Free, super high-quality images.
• Undraw – Free vector assets
• Ceagon – Make custom vector charts
• Hero Patterns – Great free customizable CSS SVG patterns
• Let’s Enhance – AI image upscaling
• Mazwai – Free video clips
• Responsive breakpoints – Making responsive images
• 9 Elements – Make some CSS blobs. No vector tool needed.

Automation and Compression

Take processes that are tedious, painful, or require expert knowledge and essentially wrap them up in a super simple way.

• SVGOMG – Compress SVGs
• SmallPDF – Compress PDFs
• Video Smaller – Compress video
• Real Favicon Generator – Generate favicons
• Make App Icon – Generate app icons
• Cloud Convert – Convert file formats from one type to another
• Everything Fonts – Tools for converting fonts to various file types, including web fonts
• B64 – Convert images to Base64 (for CSS usage)
• Premailer – Inline your CSS into your HTML for email newsletters

Validators

It’s easy to miss something. Double-check your work with validators!

• Tanaguru – Check your color contrasts and get alternatives to use
• RegExr – Write and verify your Regex patterns. Great for HTML5 pattern attribute
• ANDI – The US Government’s accessibility checking bookmarklet
• Hemingway – Check your content’s readability
• Quuz – Verify your web captions (VTT) file
• Experte Page Speed – Review one page or an entire site and how well it performs. Glad to say mine’s getting pretty fast! (Used to cite Web Page Test, but this one does subdirectory search and more!)

Reference

And finally, there are times I need to review or refer to some bit of content to make sure I’m covered or using something correctly.

• Can I Use – I like using cool new CSS stuff. Helps me know if it’s supported.
• Unicode – It’s useful knowing which emojis exist, and what their official names are for accessibility
• Privacy Policies – I don’t want to or know how to write this. Enough said.
• Avodocs – Free legal docs for startups. Haven’t needed this in a long while, glad to know it’s still around.

Conclusion

Hope this help you accelerate your workflow! What incredibly useful online tools do you find helpful? I’d love to hear about it.

Updated May 2022

Added Experte Page Test in place of Web Page Test, as it does way more.