28 Useful HTML5 And CSS3 Tools


HTML5 and CSS3 came with some really new features. HTML5 is definitely going to reform the way we create website and web apps. CSS3 is indeed a great improvement to the CSS specification. There are several tools available that can definitely be life savers when building websites using CSS3. This article explores some of the great tools, cheat sheets and much more you could need to master these new features.

Online Sprite Box Tool

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.

Online Font Testing Tool

A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.


Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.

Layer Styles

Layers Styles lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.

Needle v0.1a1

Needle is a tool for testing your CSS with Selenium and nose. It checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.


inuit.css is a CSS framework that provides you with the best dev tips, tricks and practices in one handy file.


Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.

CSS3 Generator

The tool allows you to create and customize multiple CSS3 effects.

Border Radius

Allows you to create rounded rectangles.


HTML5demos lets you know instantly which property can be used on a specific browser.

HTML5 visual cheat sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

Online 3D Sketch Tool

It adds a third to your drawings by allowing you to rotate the canvas. To rotate the canvas in 3D, you need to hold down SPACE and then DRAG horizontally with your cursor.

Online Pattern Generator Tool

This online tool is useful for web designers when it comes to creating page and header backgrounds or even heading backgrounds.

Online XRay Tool

XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

Online HTML5 Audio Maker Tool

This is an online audio maker tool which can help introduce you to the new audio features of HTML5.

Rendera – Online HTML5 Editor

Type in your HTML code and see it rendered in realtime. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports.

CanvasLoader Creator

The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects.

HTML5 Template Generator

It has an additional option to include description for the website’s author, also includes options for Favicon and Apple Touch icon in case you want them to be automatically inserted into the template.


Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Aloha Editor

The world’s most advanced browser HTML5 based WYSIWYG editor lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.

Switch To HTML5

HTML5 is the new kid on the block, sure, and with reports that an official specification wont be fully completed and officially supported until 2022, you may be wondering why you should use it in your new site.


“Wallaby” is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes.

Lime JS

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.


The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn’t finalized yet, all major browser manufacturers are making sure their browser is ready for the future.

CSS3 Pie

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.


Cascader is a tool that helps developers separate inlined CSS from HTML files.

Button Maker

This tool, created by Chris Coyier, makes CSS3 button design extremely easy: Just pick colors, adjust radius, and get the code, ready to be pasted into your CSS file.

HTML5 & CSS3 Support

This is a very useful chart, which reveals CSS3 support for all major browsers.

About The Author

Dibakar Jana DJ

Welcome friends, I am the Founder of, a well known designers blog that spread its popularity rapidly. is my second blog and I am sure this blog can make a mark in designers community.

View Authors Posts / Visit Authors Website

Related Posts

1 Comment

Leave A Response

8 - seven =


Here's the thing about web hosting - basically all shared hosts offer the same features up front, but it's their datacenter and support that really differ. You may want to compare web hosting on sites like Web Hosting Break