Fun Free Web Development Tools

Posted on Thursday, December 10th, 2015 No Comments


As I go about my work, I often Google around to find a quick way to accomplish a development-related task. Usually I need an easy way to generate a large chunk of code or calculate something, so I check the internet to see if someone has already built a tool for it. When I find a fun and useful tool, I bookmark it for later. In this post, I’ll share these tools that I’ve bookmarked. And I’ll add more later as I find more! If you know of another cool little web development tool, tell me on Twitter.


Generate coordinated color palettes based on one, two, three, or four color choices, with or without a complementary color. It even generates the hex and rgb codes for you and gives you a range of lighter and darker colors to go with each main color. You can export your palette as HTML, CSS, XML, and more formats.

Paletton The Color Scheme Designer


ColorZilla is a browser extension for Chrome and Firefox that lets you use an eyedropper to get a color sample from anywhere in your browser.

ColorZilla for Chrome Eyedropper Color Picker and much more

Ultimate CSS Gradient Generator

Another tool from ColorZilla is the Ultimate CSS Gradient Generator, which is a tool for generating a gradient in CSS. The tool works similarly to creating a gradient in a program like Photoshop, and it generates the CSS for you.

Ultimate CSS Gradient Generator

Subtle Patterns

Subtle Patterns has hundreds of free website background patterns. You can choose one and preview it on their website. Then, download the one you want for your project. There’s also a Photoshop plugin, but I haven’t used that. You can adjust the color of each pattern just by using the colorization options in Photoshop yourself.

Subtle Patterns Free textures for your next web project.

CSS Button Generator

The CSS Button Generator is a fun and quick way to get the CSS for your button. Sure, you could write the code yourself, but now you don’t have to.

CSS Button Generator

HTML and CSS Table Border Style Wizard

This tool helps you style your tables with HTML and CSS, including borders, colors, padding, and more.

HTML and CSS Table Border Style Wizard

CSS List Style Wizard

This tool generates list styles for you, with style type, various images for bullets, and positioning.

CSS List Style Wizard


Tableizer is a tool that generates HTML tables from Excel data. Really useful if you have a large amount of data in Excel that you need to convert into an HTML table. Without this, you’ll be coding for days.

TABLEIZER Spreadsheets to HTML Tables Tool


If you need to easily convert pixel text sizes into ems, PXtoEM is the tool for you. It also gives you points and percentages. PX to EM conversion made simple.

Lorem 2

Go to Lorem 2 when you need to grab a chunk of lorem ipsum text for your layout or mockup.

Lorem 2 An all around better Lorem Ipsum experience.


Got some code that’s been minified and now you can’t read it? Use Unminify to revert your JavaScript, CSS, or HTML to a regular tabbed-out style.

Unminify JS CSS and HTML Code

Bootstrap 3 Menu Generator

When you want to customize the colors of your Bootstrap menu, it can take forever to find everything you need to change (dropdowns, hovers, on and on.) This tool sorts all that out for you.

Bootstrap 3 Menu Generator

Font Awesome

Font Awesome is a collection of scalable SVG icons for use in things like menus, lists, or whatever you need. It works with Bootstrap and doesn’t need much coding to get set up.

Font Awesome the iconic font and CSS toolkit

Flat Icon

This site has thousands of free vector icons that you can download in a variety of formats. You can get packs or make your own group of icons. All free, and of course it saves a ton of time since you don’t have to make your own from scratch.

Free vector icons SVG PSD PNG EPS Icon Font Thousands of Free Icons


This is a big table of codes for ASCII characters. I use it all the time because I never remember the exact code required, or I want to quickly grab something like a bullet to paste into Illustrator.

ASCII Code The extended ASCII table

Awesome Screenshot

Awesome Screenshot is a Chrome extension that’s really useful for taking screenshots of stuff in your browser. It lets you skip pasting a printscreen into Photoshop a lot of the time, because you can grab screenshots of specific areas of the screen, and you can even add in some markup with drawing tools. It’s what I used to take all the screenshots on this page. I use it all the time.

Awesome screenshot

Okay! That’s all I’ve got for now. I plan to add more tools here as I find them. As I mentioned at the top, Tweet me if you have a tool that you think should be included here.

Posted in Web Design. Tagged with: , , , ,