200+ Best Free Tools & Resources for Front-End Web Developers

11 min readMar 16, 2015



COLOURlovers: User created & shared color palette inspiration

ColorPicker: Online Color Picker Tool

Color Hex: A free color tool providing information about any color

Flat UI Colors: Web app helps you to copy the colors from Flat UI

Contrast Ratio: Easily calculate color contrast ratios

Color Safe: Color palettes based on WCAG Guidelines

Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.

Colllor: Color palette generator

Paletton: Tool for creating color combinations

Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.

Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.

Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.

Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.

SassMe: A Tool for Visualizing SASS Color Functions

HEX To RGB: Convert Hex color to RGB.

HSL to RGB: HSL to RGB / RGB to HSL converter.

Colour Scheme Calculator: Choose a starter color to calculate its color wheel including triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations.

CSS Generators

Ultimate CSS Gradient Generator: CSS gradient generator

Colorful CSS Gradient Background Generator: Generate CSS background

EnjoyCSS: All in one CSS generator

CSS MenuMaker: Create responsive website navigation

On/Off Flip switch: Generate CSS3 On/Off flip switches

CSSmatic: Gradient, border radius, box shadow & noise texture generator

Ajaxload: Ajax loading GIF generator

Ui Parade Live Tool: Button, Form, Icon, Ribbon builder

CSS Table: CSS table generator

CSS Triangle: CSS triangle generator

CSS Arrow Please: CSS arrow generator

Patternify: A CSS Pattern Generator

CSS3 Patterns Gallery: CSS3 patterns gallery

Critical Path CSS Generator: Speed up your page render time

Button Generator: CSS button generator

Layout Generator: Create CSS layout

Tridiv: Web-based editor for creating 3D shapes in CSS

Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds

Delaunay Triangle: Triangle pattern maker that can be used as background

Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup

Stylie: A fun CSS animation tool

Calculator & Converter

CSS2Less: Convert old CSS files to LESS files

PXtoEM: Convert pixels to EM

RWD Calculator: Turn your pixel based designs to responsive

DPI Love: Find DPI/PPI of any screen

CSS Inliner: Automatically inline your email’s CSS

Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel

Density Buckets: Screen density converter for Android and iOS

Pixel Density Converter: Tells you how to scale graphics between four density groups.

Is This Retina?: DPI/PPI Display calculator

Specificity Calculator: A visual way to understand CSS specificity

NTH-Test: nth-child and nth-of-type Tester

Lessify: A configurable CSS to LESS converter and LESS learning tool.

Typography & Font

Google Fonts: Open source web fonts

Font Squirrel: Hand picked free web fonts

Dafont: Archive of freely downloadable fonts

Font Space: Download free fonts

Type Genius: Find the perfect font combo

Golden Ratio Typography Calculator: Discover the perfect typography for your website

What Font Is: Identify font from a image

Typetester: Compare Web fonts from Adobe Edge, Google and Typekit

Tiff: Find out difference between Google fonts

Wordmark.it: Preview the output of fonts for a selected word

TypeWonder: Test web fonts on any live website

Fit Text: A jQuery plugin for inflating web type


Font Awesome: Scalable vector icons that can instantly be customized

Material Design Icons: 750 glyphs Material Design system icons pack by Google Design

Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons

Marka: Beautiful transformable icons

Maki: Icon set for web cartography

Batch: 300+ icons for web and user interface design

Fontello: Icon font generator

Fontastic: Create your own icon font

Icon Melon: SVG icons library for web

Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce

Gemicon: 600+ Free icon set, comes in 3 different sizes (16px, 32px, 64px)

Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces

Iconmonstr: A large collection of glyph icons from a German artist

Octicons: Icon font launched by GitHub

GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons

Analyze Website Style

Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing

StyleStats: Simple tool to collect CSS statistics of a website

Colours: Find out the most common colour or hue of a website

Type-o-matic: A browser extension that finds all the fonts on a page

SnappySnippet: Easily extract CSS and HTML from selected element


CodePen: Show case of advanced techniques with editable source code

JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online

JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors

CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers

Dabblet: An interactive CSS playground and code sharing tool

Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers

Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes

webflow: Drag-and-drop website builder for creating professional responsive websites

Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS

Developer Tools

Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome

Grunt: The JavaScript Task Runner for automating tasks

LiveReload: CSS edits and image changes apply live without needing to hit refresh button

Bower: Solution to the problem of front-end package management

Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts

Can I Use: Up-to-date browser support tables for support of front-end web technologies

HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use

CSS Values: CSS Reference, Properties and Values

CSS Triggers: An invaluable reference on how CSS affects performance


W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard

W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets

CSS Lint: Points out problems with your CSS code

JS Lint: JavaScript program that looks for problems in JavaScript programs

Pesticide: CSS layout debugging

PhantomCSS: Visual/CSS regression testing with PhantomJS

CSS Critic: Regression testing of CSS

DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup

QUnit: A JavaScript Unit Testing framework

Dromaeo: JavaScript Performance Testing

Browsershots: Cross platform browser test

Responsinator: Check how your site will look on the most popular devices

Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface


Pingdom Website Speed Test: Test & analyze the load time of a live page

WebPagetest: Website speed test from multiple locations around the globe

PageSpeed Insights: Analyzes website and suggest ways to make it load faster

GTmetrix: Grade site’s performance and provides recommendations to fix these issues

YSlow: Analyzes & offers suggestions for improving the page’s performance

Perfmap: A performance heatmap of resources loaded in the browser


CSSCSS: Let you know which rulesets have duplicated declarations

Helium: javascript tool to scan your site and show unused CSS

CSS Tidy: Opensource CSS parser and optimiser

CSS Compressor: Compress your CSS to increase loading speed

CSS Dig: Take a look at all your CSS properties, their frequency and variations

JavaScript Minifier: Minify your JavaScript

FF Subsetter: Reduce the font file size to optimize bandwidth usage

Compressor.io: Reduce the size of your images while maintaining a high quality

Prefix free: add the current browser’s prefix to any CSS code only when it’s needed

Sprite Cow: Generate CSS for sprite sheets

TinyPNG: Advanced lossy compression for PNG images

Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images


Bounce: Add feedback on a design and share it with other people

Marqueed: Capture, annotate, Share and discuss images

Design Drop: A tool for collecting design feedback

Peek: See and hear a 5-minute video of a real person using your site


Call To Idea: Examples designs, components, ideas, logins, patterns, tabs, toggles, registers, lists, galleries, comings

Land Book: Cool landing page gallery

UX Archive: Most interesting user flows from iPhone 4S and iPhone 5

UI Parade: Online catalog of inspiration for UI designers

ZURB U: Find UI design inspiration

UX Porn: User Interface Design Patterns and Wireframe Templates

UI Patterns: User Interface Design patterns

Pttrns: A collection of mobile user interface patterns

TabPattern: Tablet UI Patterns

UICloud: User Interface Design Search Engine

Use Your Interface: Library of transitional interface and interaction design patterns

Niice: A search engine for finding design inspiration


Intro to the Design of Everyday Things: Informative for anyone curious about design: everyday people, technical people, designers, and non-designers alike

Delft Design Approach: Introduction to fundamentals and methods of the Delft approach to designing meaningful products and services

Prototyping Interaction: Learn the different methods of prototyping by sketching, building and testing

Introduction to Graphic Design: Learn foundational graphic design principles (fonts, colors, images, backgrounds, and layouts) and how to apply them.

Intro to HTML and CSS: Learn how to convert digital design mockups into static web pages

Web Development: Learn core web development concepts from Reddit & Hipmunk co-founder Steve Huffman.

Responsive Web Design Fundamentals: Learn the fundamentals of responsive web design with Google’s Pete LePage

Responsive Images: Learn how to work with images on the modern web, so that your images look great and load quickly on any device

HTML5 Canvas: Learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.

Developing Android Apps: Learn how to build an Android app

JavaScript Basics: Learn the JavaScript programming fundamentals

Object-Oriented JavaScript: Learn how to utilize the various object-oriented programming features within JavaScript, and more importantly, how to write reusable and maintainable libraries.

JavaScript Design Patterns: Learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way

JavaScript Testing: Learn how to write JavaScript applications with confidence, using the red-green-refactor workflow

Building Mobile Web Experiences: Learn how to create great cross-device mobile web experiences.

UX Design for Mobile Developers: Dive into the techniques that great designers use to plan and prototype amazing apps before any code is written

UIKit Fundamentals: Build a series of simple apps to become more comfortable with the UIKit framework and master its most widely used components

Intro to jQuery: Learn how to read and make sense of jQuery’s documentation.

Intro to AJAX: Learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so

Website Performance Optimization: Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

Gamification Design: Learn the basics of Gamification with a highly practical approach

Wireframes, Mockups & Prototypes

Origami: Free tool for designing modern user interfaces created by Facebook

Cacoo: Create a diagrams, site map, flowchart, mind map, wire frame, UML diagram and network diagram

Marvel: Turn your Dropbox or desktop images into web and mobile app prototypes for any device and get feedback

Placeit: Create iPhone mockups and iPad mockups

MockFlow: Online services to Plan, Build and Share work for designers

Justinmind: Interactive wireframes for web and mobile

Wireframe.cc: Free minimal wireframing tool

Design News & Community

/r/web_design: Web design subreddit

/r/design: Design subreddit

/r/usability: User experience, Interface design, or Human Factors subreddit

/r/userexperience: User experience design subreddit

Stack Exchange: Graphic Design: Q&A for Graphic Design professionals, students, and enthusiasts

Stack Exchange: User Experience: Q&A for user experience researchers and experts

Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community

Pineapple: Hub of Tutorials, Tools and Assets for developers and designers

Lockerdome: An interest-based social network

Designer News: A community of people in design and technology

DesignFloat: Web design news & tips

The Web Blend: A community for designers, developers and tech junkies

Design News: A site that features news articles, resources and tutorials written by designers and developers


Behance: The leading online platform to showcase & discover creative work

Dribbble: A place to show and tell, promote, discover, and explore design

Cargo: Personal publishing platform aimed at creating accessible tools and a networked context to enhance the exposure of talented individuals on the Internet

DeviantArt: An online community, showcasing various forms of user-made artwork

WordPress Themes

Optimizer: An easy to customize multipurpose theme for people who don’t like to mess with code.

Customizr: Customizable responsive theme with flat design. Well documented and easily extendable with hooks.

Asteria: A clean responsive theme with a beautiful slider, Narrow and Wide Layout Option.

Storefront: Designed and developed by WooThemes for WooCommerce projects.

Bellini: A blazing fast WordPress theme built for creating eCommerce website.


Microjs: Discover Micro-Frameworks and Micro-Libraries

Vector Open Stock: Free vector graphics

Buttons: A CSS button library built with Sass & Compass

Bootflat: Open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

Animate.css: A cross-browser library of CSS animations

CSS Shake: CSS shake graphics and icons for your page or app

Subtle Patterns: Free tilable textured patterns

Placehold.it: image placeholders

Holder.js: Client side image placeholders

Hammer.js: Add multi-touch gestures to your webpage

Textillate: A simple plugin for CSS3 text animations

Timeline JS: Beautifully crafted timelines that are easy and intuitive to use

Modernizr: JavaScript library that detects HTML5 and CSS3 features in the user’s browser

Isotope: Create a filterable portfolio for your website

Polymer: Makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond

CodyHouse: A free library of HTML, CSS, JS nuggets

Cheetyr: Collection of cheat sheets and shortcuts for designers and developers

Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Modest Maps: Free library for interactive maps

Templated: A collection of 846 free CSS and HTML5 site templates, designed & built by Cherry + AJ

GraphicBurger: Design resources offered for free to the community

Please share this post if you liked it!




Built @atlantis_theme. Write on @GoDaddy. Work with & build on @WordPress & @WooCommerce a lot.