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!
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
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
In a beautiful interface, generating rounded borders could not be easier.
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
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
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
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
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
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
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
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
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
“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
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
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
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
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
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
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
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
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
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 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
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
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.
Our Sponsors
Responses
Add YoursTrackbacks
HTML and CSS are the two most commonly used languages on the web. While it may not be the most advanced form of ...
HTML and CSS are the two most commonly used languages on the web. While it may not be the most advanced form of ...
HTML and CSS are the two most commonly used languages on the web. While it may not be the most advanced form of ...
Quick Look
Get your app in front of thousands of interested users with a sponsored Quick Look post, including a poll for users to vote for an in-depth review!
Find out more
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.