CSS3 and HTML5 is now future of web. Below is the list of most famous tools for CSS3 and HTML5. developers can use these tools to make their work easy and fast.

1. Prefixr(CSS compression online tool)

Free online tool to minimize CSS file

Prefixr is an online tool which helps in compression, minimization of your CSS. In addition to make it cross browser and give you a number of other options to improve/transform your CSS in just a few clicks.

2. RGraph (javascript graph and charts)

javascript charts and graphs library

RGraph is an HTML5 graphics library that uses the HTML5 canvas tag to draw and it supports more than twenty different types of graphs. Using the new tag, RGraph creates these “letters HTML” within the browser using JavaScript, IE the pages faster and less load on the web server. This leads to smaller page sizes lower costs and faster sites.

Many JS frameworks were released, allowing a nearly instantaneous graphics generation. This generated a growth of popularity, since the amount of information that needs to be shared via the internet has increased each year. As a result, we’re not seeing popular frameworks like the RGraph HTML5-friendly solutions.

Also Read

3. yaml layout online tool

yaml layout builder
YAML is one of the most popular grid systems released until today. It includes powerful CSS properties, which allow the manipulation of the values of columns, tables, and all other HTML containers. Wrappings and IDs involved are based on simple classes that can also be redesigned and edited at will.

YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.

  • Bulletproof flexible grid system
  • Flexible forms Toolkit with the support topic
  • Focused on web standards and accessibility
  • Optimized typography for all standard elements
  • Combined building blocks for rapid prototyping
  • Namespacing avoids conflicts
  • Well prepared for HTML5 and CSS3
  • Very thin framework core (4.6 kB)

YAML was intended as a basis for the development of flexible layouts, with a strong emphasis on the challenges that result from working with flexible containers (elastic, fluid) and different units.

This CSS framework has been continually improved and expanded over the years, based on feedback and the needs of professional frontend developers. Your codebase was shown to be stable in real-world conditions in thousands of sites. Over the years, the YAML-based site has won several awards at the annual German accessibility contest

4. CSS viewer

CSS viewer Online

The extension CSSViewer for Firefox shows CSS rules applied to a given element you point with the mouse. Very useful when you identify strange behavior and need to figure out what’s causing it or by issues of learning to understand how it was done a certain effect.

5. CSS-Typoset Matrix (CSS tool to for font)

ss tool for font size style and color

CSS-Typoset Matrix is a tool that displays the font sizes, line heights, margins (in pixel units and in) for various sizes of base letter. Also shows the CSS code based on your inputs.

6. csstypetest

Two way editor for CSS3

csstypeteste features 2 side-by-side editors. In the first, you write the text you want and the second displays the CSS code. Underneath, you can change the font and has several options in terms of typography that you can try, you will see the results on the first editor where you added the text. It has the advantage of you compare side-by-side multiple sources and configurations, but it is simple to use and the interface is nice and functional.

7. CSS compressor

free tool to compress CSS file online

CSS Compressor allows you to compress your CSS, increase loading speed and save bandwidth. You can choose between three levels of compression, depending on how you want the compressed CSS to be readable due to the degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

8. Web developer addon for Firefox

addon for firefox web developers

The Web Developer for Firefox is a sensational tool, certainly one of the top Firefox extensions and every developer must have her as support. Is a real Swiss army knife for developers, and can perform validations, check html codes, css; scripts in javascript; color palette, information about images, among others.

9. Cartagen

interactive map designing tool

Cartagena is a specification for design and styling of maps. In the same way that the CSS styles to web pages, the GSS is a specification for creating interactive digital mapping sequences. Adapted to dynamic data sources, the GSS can set the change of geographical elements, display multiple sets of data, and even respond to tags derived from the user.

10. Online button maker

RSS button maker online

Use the Button Maker Online to easily create buttons popularly known as “XHTML” micro (80 × 15). You can also opt for the larger 88 × 31 pixel button.

11. BluePrint(CSS framework)

css frameworks comparison

Blueprint is a CSS framework that aims to reduce development time. it gives a solid foundation for building a project with an excellent grid, sensible typography, useful plugins, and even a stylesheet for printing.

12. alloyui(online ui mockup tool)

online ui mockup tool

Set of popular UI is a great starting point for developers. Those who are not sure how to continue with its design should take a look at more in-depth solutions. Alloy is an incredible set of UI elements that shows how HTML5 can offer us.

13. HTML CSS3 Reset


The HTML5/CSS3 Reset offers a whole new set of rules. Those who are familiar with the new properties in CSS3 will be delighted to see how much control is built out of the box. You can check out the Github repository above and your readme.txt for useful information.

14. Switch to HTML5

HTML5 online framework

Switch to HTML5 is a very powerful tool. It allows access to numerous elements and sub-estates available on new specification developers. There are also many options for meta-information, including Locale and charset. The tool may seem a bit overwrought, but give her a chance.

15. Less framework

less online framework

Less Framework gives you more control over CSS between various devices, without hassle. Inline media queries are the key here, allowing the simple exchange of a stylesheet in seconds. Each layout is carefully designed to fit into most common devices screens. All projects are able to run since the IOS and Android until back to Internet Explorer 6.

16. CSS3 action framework

CSS3 Action framework
The open source project is hosted on Google Code repository, in which all updates and revisions are recorded. Although not fully active, the community is growing. You can search in your wiki for more resources.

17. 52 Framework

framework for HTML5 and CSS3

52 Framework is one of the most popular HTML5 and CSS3 frameworks available today. Its features include rounded corners, shaded text, markup for HTML5 classical, internal system grid, among many others. Is a free community project, with many employees. Take a look at their demo page for more information.