25 Super Web-based HTML & CSS Tools

HTML and CSS are the two most commonly used languages on the web. While it may not be the most advanced form of web development, every website made in the past decade uses both languages. Needless to say, there’s a lot to learn here, but that doesn’t mean tools can’t help. We’ve compiled a super list of super tools to take your markup from mediocre to macho.

As of now, HTML5 and CSS3 specifications are frequently changing. The markup you generate today may not work in tomorrow’s browser (but you’re generally pretty safe).

CSS3 Please

CSS3 Please

CSS3 Please!

With all the browser-specific CSS3, it’s no doubt that anyone would get tired of having to essentially re-write a slightly modified line of code to accommodate just one browser. css3please takes care of this trouble by offering an incredibly easy way to generate proper markup to suit all browsers. This is a very good tool and every developer should be using it.

CSS3.0 Maker

CSS3.0 Maker

CSS3.0 Maker

This is one more great CSS3 markup generator. It makes use of sliders and even a live preview area to generate cross-browser markup.

CSS Border Radius Generator

CSS Border Radius Generator

CSS Border Radius Generator

In a beautiful interface, generating rounded borders could not be easier.

BonBon Buttons

BonBon Buttons

BonBon Buttons

With everything from dynamic gradients and shadows right around the corner, the internet is seeing less images being necessary to generate beautiful buttons. BonBon Buttons helps you with this in a gorgeous interface with just one goal in mind. It’s ease of use and absolutely stunning result make this by far one of the best button generators on the web today.

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

It can be cumbersome to have to manually input the direction, start, stop, and color codes to perfect that CSS3 gradient. A gradient with multiple stops and color changes? Believe me, it’s not the most fun thing to code and images aren’t easy to modify after they’re on the site. Luckily, Colorzilla has designed this super easy to use gradient generator for this purpose. It uses sliders and color pickers just like Photoshop and is highly recommended.

CSS Typeset

CSS Typeset

CSS Typeset

Another beautiful interface that helps set up that perfect font using CSS. Includes support for a handful of common fonts and allows you to adjust the font size, color, and advanced styling.

Mike Plate's CSS3 Playground

Mike Plate's CSS3 Playground

Mike Plate’s CSS3 Playground

This superb little interface is easy to use and generates great CSS3 effects such as rounded borders and drop shadows. More options such as transforms, gradients, and outlines make this a very good web service with a very good approach.

PX to EM

PX to EM

PX to EM

I like to measure in pixels. But Ems work best across browsers, even mobile browsers, and should always be used for fonts. This web service is simple to use and does exactly what it says it does. It will instantly convert a font size you give it (such as pt or px), and, in return, give you the size in Ems, or vise versa.

CSS Sprite Generator

CSS Sprite Generator

CSS Sprite Generator

Any web developer knows that the fewer HTTP requests, the better. One way to limit these requests is to combine common site images (usually icons) into one image called a “sprite”. CSS Sprite Generator makes this easy by asking for a zip of your images. Simply follow the steps and it will give you a perfectly-aligned, glyph image with an appropriate stylesheet. Much easier and faster than doing it by hand.

CSS Color Editor

CSS Color Editor

CSS Color Editor

Well, your site looks just dandy. But the client wants a different color scheme. Go back and edit every single color code? Don’t even think about it. Simply upload your file to CSSColorEditor, and it will pull out each of the colors, arrange them in a list, and you can simply go down the list and adjust the colors that need adjusting. It gives back the properly modified CSS file.

Grid System Generator

Grid System Generator

Grid System Generator

Choose a grid system. Input the desired width, number of columns, and margin. Hit generate. No need to scour the web for download links or latest versions of grid frameworks; It’s all done right here.

CSS Text Wrapper

CSS Text Wrapper

CSS Text Wrapper

Tell me: when was the last time you saw a paragraph that wasn’t a rectangle? Now I know some of you are going to say “just recently” and that’s because this web service exists and is so easy to use. Make your paragraph a circle or trapezoid — even a crazy curve shape — it’s incredibly easy using this exquisite tool.

Typechart

Typechart

Typechart

“Find web type, grab CSS” is the slogan and it really is that easy. Browse through and find that perfect font, and hit ‘get CSS’. There is also an option to view what the font looks like on another platform (Win/Mac), and the beautiful interface makes it all the better.

ColorPicker

ColorPicker

ColorPicker

Don’t open up an image editor just to find a color! This web service has a color picker and spits out a HEX code alongside the standard RGB. Great for choosing that quick color.

Listamatic

Listamatic

Listamatic

Who knew a simple list could have so many possibilities? Listamatic has more lists than you can care to count. Simply choose the one that fits your project and it gives you the HTML and CSS. (Really there are a lot of lists here)

Construct Your CSS

Construct Your CSS

Construct Your CSS

This is a WYSIWYG layout editor. Based on the Blueprint framework, this is a GUI for a CSS layout. Let’s face it: coding a framework by hand is incredibly monotonous. With a very simple interface, you can add a container, and within it add columns. It generates the HTML and CSS at the click of a button. Making your own custom framework has never been easier.

Tabs Generator

Tabs Generator

Tabs Generator

This is one of the most lovely interfaces for sometimes not-so-lovely work. Create perfect tab-style navigation buttons in CSS3 using this beautiful service. With controls for everything from corner radius to orientation, it’s clear that doing this manually is a thing of the past.

Instant Blueprint

Instant Blueprint

Instant Blueprint

With things like zen coding and SparkUp, it’s no doubt that web developers are expected to work much faster given the tools at hand. Instantblueprint has a plethora of options wrapped up in a gorgeous interface. It generates a valid HTML and CSS framework that can be used immediately in projects.

Tiny Fluid Grid

Tiny Fluid Grid

Tiny Fluid Grid

While not exactly a web service, this grid generator is a gorgeous example of great design. It generates a grid framework using simple options and even includes a preview page for you to make sure your grid looks perfect.

ProCSSor

ProCSSor

ProCSSor

This is a beautifully designed, fully-featured, easy-to-use CSS prettifier. It allows file input via direct paste, file upload, or even URL. It’s plethora of options is perfect for a developer with sloppy code.

Styleneat CSS Organizer

Styleneat CSS Organizer

Styleneat CSS Organizer

Much like ProCSSor, this web service accepts code via direct paste, file upload, or even URL. While it doesn’t have as many options as ProCSSor, it’s ease of use and clean interface makes it a great alternative.

Code Beautifier

Code Beautifier

Code Beautifier

Another fantastic CSS beautifier. Includes many options for compression or organization, and a smart backend. Designed with utility in mind, Code Beautifier has both a simple and advanced option set to accommodate both beginner and established developers alike.

Primer

Primer

Primer

Primer is another well-designed code cleanup utility. This is useful for developers who start coding their HTML with all the ids and classes they’ll need for later. Simply paste code into the box, click “Prime It”, and CSS Primer will pull out the ids and classes, and stick them into their own .css file, ready for development.

CSS Compressor

CSS Compressor

CSS Compressor

This back-to-basics CSS compressor does just that. It has a setting for compression level and accepts pasted code. Very simple to use, and very useful for optimizing code.

Clean CSS

Clean CSS

Clean CSS

Another great option in the sea of code cleanup web services. Simply paste your code or feed it a URL, choose your compression type, select advanced options if necessary, and it will tidy up that code in a split.


Responses

Add Yours
  • Nice list of apps, these will come in handy. Thanks!

  • Nice list, but you forgot http://www.kodingen.com
    It makes it possible to develop anywhere we want!

    Awesome tool and v1 will be released in a few weeks, with colab support, svn support and much more! Check it out!

  • These are some great tools! However, you stated under the gradient one “and images aren’t easy to modify after they’re on the site. ”
    Modifying an image is easy. You change it and reupload it. Done. It would submit that CSS gradient are more difficult to edit than an image. Nevertheless, still a cool tool.

  • This article is great. These are definitely a must have for any dev.

  • Thanks! How about CSS Pricing Table generator :)

  • hi..! appstorm
    i use google alert find out u blog

    Thank You for having us
    excellent information, thank you thanks for the inspiration!

  • Great list. Has any one checked Xeo CSS. Its a CSS WYSIWYG Editor with CSS3 support

  • Hey guys, love the posts, but please update your feedburner email settings to make the image appear *after* the title of each post. Right now the image is at the top of each post, and it’s really confusing to read…

  • Thanks, guys!

    I’m no super advanced developer by any means, but I felt like I should share these great tools with this great community.

    Hope they help!

    If you know of any more tools like this, please share them!

  • Wow this is great! I love finding new HTML/CSS3 tools like these.. they are very inspirational for developers like myself! I haven’t seen any type of growth like this recently.. so I’m very glad to see new lists coming out of 2011

  • Nice tools, thank you but CSS Piffle is also great tool.

    piffle.abdoc.net/

  • Nice web tools you have there, some will jump in my bookmarks bag. :-)
    Haven’t tested them all, however i would add one “tool’ for fonts – that create 4 standard fonts used for @font-face (ttf, eot, woff, svg) from one of them….
    Really saves time and comes with some help html files.

    Check it out here:
    http://www.fontsquirrel.com/fontface/generator

  • Hey, thanks for this list. I find it very helpful to generate buttons online now.

  • Thanks,
    Good list of apps, these will come in handy.