Welcome! In this guide, we're going to be taking a look at over 50 resources for web developers and designers.
Whether you're looking for gradient generators, tools to create color schemes or useful frontend libraries, there will be plenty of resources here to make use of and help you create and develop stunning websites.
Get AirTable file: Get an extra AirTable file of all bonus resources, including other tools not mentioned here. Simply subscribe to the newsletter (which I send out once per week) and you'll get the tools right in your inbox.
Got a tool or resource you'd like to share? If you'd like to submit a link for consideration to be featured here, then just contact me or send an email to: silvia [at] isotopeui.com
Without any further ado, let's get started!
An excellent alternative to Postman, right in your browser 🤩 You can test that API you've been wanting to try out with this intuitive tool.
Acreom is a fantastic productivity tool for developers, which keeps tasks and items organized in a streamlined manner. With a stunning dark mode, the user interface is incredibly intuitive, with a fantastic user experience overall. You can create tasks, add notes, build diagrams, integrate with your calendar, and so much more. Keyboard shortcuts are also supported too.
Overall this is a fantastic productivity tool that I'd definitely recommend for developers!
NuTab is an excellent browser extension that allows you to create notes in Markdown within your new tab page, perfect for helping you save those items you want to remember. For instance, you could use this browser extension to save to-do items, lists, links and much more. This would be super useful to developers too, and it's available for Chrome and Firefox!
This is a great self-hosted website analytics solution, with a fantastic variety of features, including an excellent dashboard. It also offers heatmaps to help you gain further insights into what parts of your page could be optimized. It's quick and intuitive to set-up, and you'll have it up-and-running before you know it!
General Task is an excellent productivity tool, and especially so for developers! You can include GitHub Pull Requests and Linear Issues to help you focus on new bugs to be fixed, features to be implemented and so forth. Once you've created tasks to be done, you can then add these to your Google Calendar too. The Focus Mode option also helps eliminate distractions by displaying the task for the given time slot.
Overall this is an excellent tool that I'd highly recommend, and I'm excited to see the userbase for this continually grow!
I've been there, you've been there -- I think we all have been there at one point.
You have a frontend ready to go, but want to check if it's fetching and displaying data correctly. It happens to the best of us!
Reqres is a REST API that accepts requests and responds with sample data and collections.
UILicious is an excellent tool that helps automate testing for you. This makes it super quick and easy to create website tests, and there are cool examples available on the home page to showcase how these tests are created, including a login form example. You could use this to ensure that your login forms are working correctly, pages are loading as intended, and much more!
I'd definitely recommend checking out the Use Cases page too, which shows more examples.
This tool helps you find NPM package alternatives. Below, I search for alternatives to lodash, and found some great results!
The tool every frontend developer needs for building responsive websites. Preview your website, web app or project at different screen sizes using Responsively:
A blazing fast build tool! ⚡⚡⚡ It's reduced build times considerably for me, I must say. I'd definitely recommend taking a look at this!
DBSnapper creates sanitized snapshots of production data, which helps to cut down on development time overall. With DBSnapper Cloud, you can retrieve snapshots from the cloud directly. I'd definitely recommend this solution if you'd like to develop your software more quickly using sanitized production data.
Get all the stats related to a NPM package with Bundlephobia. Find out how much that new dependency will really add to your project:
Create flowcharts using this fantastic tool, which converts your text to flowchart diagrams. You can use this to create nodes, edges and edge labels, which all connect together to create your diagram.
This would be super useful for technical documentation, and so much more! The homepage also has a quick-start demo that you can use to get started with right away. Simply try editing the text and the diagram will update in real-time.
This is an open-source set of icons, perfect for your next project! These are MIT licensed, and there are over 170 icons available.
Link: Mono Icons
A set of cool SVG icons for React. You get over 615 icons in this set spanning a variety of categories. Icons can be quickly customized via passing props to the components. For instance, you can easily change the color or size of the icons.
Link: Grommet Icons
Preview lots of React icon libraries all at once using this nifty web app. You can get the names of each icon too, as well as sample code for importing icons. All for each icon library featured. It's the icon viewer I've always been looking for!
Futuristic icons, perfect for VR and AR applications, and so much more. 🤩
This is a fantastic icon set with over 1700 icons that are compatible with AdobeXD, Figma, Sketch and many others. There's a stunning range of icons here, spanning categories including eCommerce, email, finance, and many more. I'd definitely recommend taking a look at the options and categories available. These would be great for designs, websites, web apps and would be an excellent addition to user interfaces!
If you're looking for icons and illustrations, I would recommend taking a look at Many Pixels' fabulous set of free icons. If you need custom designs for your business or website, you can also get custom illustrations and designs made for you.
Link: Free icon set
An open-source set of icons, with over 860 to choose from. These span a variety of categories, including icons for application UIs, weather apps, editors, and much more.
If you're on the lookout for a great set of open-source icons, I would definitely recommend Eva Icons! There are over 480 icons available in this set, and you can quickly search through the options available on the official site too.
Links: GitHub repository | Official site
Did you know you can create icons with CSS only? This fantastic resource shows it's indeed possible, and there are over 700 to choose from! You can export either the CSS or the SVG required for each icon using this useful tool.
There are all sorts of cool weather icons available here, and no matter what weather there is, there's probably an icon to match it right here!
I absolutely love gradients, and they can add such a beautiful pop of color to hero sections, buttons, titles and much more. Icons are no exception! Gradientify is an amazing collection of icons, with customizable gradients added. 🤩
An open-source set of 430 icons, perfect for developing system applications, digital apps, and more.
I've created lots of Tailwind gradients that you can quickly copy and paste. Many of the options available incorporate gentle, pastel shades which combine together to create harmonious combinations, while others are bold and bright, perfect for adding a splash of color to any website.
This web tool allows you to cycle through gradients, which is perfect for getting inspiration for the types of gradients that would work well for your website's design.
From warmer palettes to cool-toned gradients, there's an excellent variety here overall. With a dazzling selection to choose from, many of these gradients were created by the community, so they aim to be aesthetically harmonious. I've found the tool to be very intuitive to use, and would definitely recommend it for those who are looking for new gradient ideas!
If you're hoping to generate CSS which will render a gradient background, this is the tool to do just that! Simply enter two colors (or try out the two colors that are provided by the site), and the corresponding CSS will be generated. I've found the interface to be very intuitive, and love the gradient preview that's displayed after the two colors are entered; it truly showcases the power of gradients and how they can make for harmonious backgrounds in websites.
Who doesn't love shadow gradients? This fantastic resource has so many beautiful shadow gradients to choose from, ready to use in your projects! 🤩
If you're on the lookout for gradient inspiration, I would recommend Gradienty, which has a stunning variety to choose from, with new options added each day!
Blobs are all the rage these days, and gradients are too! Why not combine them together using this animated blob generator? You can create stunning animations, perfect for adding to your landing pages, signup screens and more.
We have a range of animated backgrounds that you can add to your websites and projects, including those with moving particles, constellations and many more. Our background pack has over 100 designs and variations to choose from, including those with mesh gradients, SVG waves, and particles.
Link: Background pack
Generate cool patterns with this great tool! You can create Bauhaus backgrounds, triangle patterns, add color palettes and much more.
SVG waves are great page dividers, and you can generate cool waves using the GetWaves web app. It can also generate randomized versions of the waves, plus you can customize the design, such as the wave color and more. SVG waves can be used as page dividers or could be placed at the end of a landing hero for a cool effect.
Haikei is a web app for generating cool SVG backgrounds. You can choose from a variety of preset designs and then customize the colors and shapes to create your final output. This can then be exported as an SVG or PNG.
This is an excellent library for generating repeating patterns using just CSS. It's been one of my favourite discoveries this year, and it's so much fun to create cool backgrounds using this library. If you want to add some fun patterns to your websites or web apps, I'd definitely recommend trying this out.
Lukasz Adam has provided a fantastic set of free illustrations that you can add to your websites and projects. Illustrations can really add a lovely touch to a website's design and aesthetic, and these illustrations look amazing, I must say!
Another great source of lovely illustrations is Illlusrations.co, with a fantastic variety to choose from. These would be a lovely addition websites, landing pages, hero sections and more.
In addition to icons, Many Pixels also has a great variety of free illustrations available, spanning a variety of categories.
Link: Free illustrations
MixKit has a selection of beautiful illustrations, spanning categories including those featuring nature, business-related illustrations, and much more.
The illustrations available here are just stunning, and would look fantastic for a variety of use cases, including mobile app backgrounds or in blog posts too. 🤩
PixelTrue have a variety of free illustrations that you can to your projects, including those that would be great for eCommerce sites or for confirmation screens also!
Link: PixelTrue free illustrations
This tool allows you to generate tints and shades for a color, which would be super useful for designing and developing UIs. You can also generate random color palettes by pressing the space bar on your keyboard.
Link: Tints & Shades Generator
This resource showcases a stunning array of gradients created using Tailwind CSS. You can export the markup required for each gradient and even favourite the gradients too!
MyColorSpace also creates cool color palettes, including those created from gradients and much more.
Stunning color inspiration for UI elements, backgrounds, and so forth.
Generate the corresponding tints and shades for a given color. Or you can choose from the set of colors provided on the homepage, just click on a square and the corresponding tints and shades will be generated!
This useful tool allows you to generate and preview different color palettes for given UIs.
Enter a word or phrase, and get previews of fonts available on your local machine or on Google fonts. It's a great way to preview lots of fonts quickly and see which would work best for your project or use case.
This useful web app allows you to enter a word/phrase and then preview fonts. Plus you can download the generated image too!
If you're developing a website and want feedback, I would recommend trying out Ruttl. Users can add comments to your site, add ideas for edits and more.
OTPfy helps you add 2FA (2-Factor Authentication) to your website using QR codes. It's super quick to set-up, and if you'd like to add 2FA to your site, then I would recommend taking a look at this!
It works by generating a QR code which you can then scan. After scanning the QR code, you'll get a one-time pascode and can then verify this through a REST API call.
Overall, this would be super useful to any developers who wish to add 2FA authentication!
This is an incredibly fast headless CMS that I would recommend. If you're building a blog or site using React, Next.js or Gatsby, I would recommend trying out a headless CMS such as this one from BCMS!
A SaaS starter kit for Ruby on Rails, complete with authentication, support for subscriptions, an admin interface and more.
If you have multiple sites or links you would like to maintain in one universal navbar, try out Navbar Links. You can see an example of this universal navbar in the image below.
If you'd like to visualise your Tailwind config's color scheme, fonts and more, I would recommend taking a look at this nifty web app that showcases your config in a visual format.
💡 🔗 If you'd like to discover more useful Tailwind tools, then check out my Tailwind resources list, which covers over 20 resources to help supercharge your development.
This web app is fantastic for adding custom annotations, text, arrows and shapes to your screenshots. For example, it would be super useful for creating developer documentation or for annotating websites. I've used this quite a bit when offering technical support to fellow developers, as well as for my articles, and would highly recommend it!
* This post contains some affiliate links, and we may earn a small commission if you click on these links and purchase a premium product from the linked site.
If you'd like to get an AirTable list containing more resources, you're in luck! If you'd like to access these, then just subscribe to the newsletter here. You'll also receive a weekly email, where I share other cool finds and resources.
If you'd like to take a look at other useful resources, I've also written a guide to the most useful Tailwind libraries and tools. I'll be writing many more guides and lists in the coming months, so be sure to keep an eye out for those.
I hope you've found this list useful, and that you've discovered some new tools and libraries for your web development projects. If you have any other links you'd like to recommend, you can contact me here. Wishing you the very best! Until next time : - )