10+ useful tools to simplify CSS3 development

CSS3 is indeed a great improvement to the CSS specification. It allow web developers to add stylish effects to their websites, without any headaches. That said, several tools can definitely be life savers when building websites using CSS3. In this article, I have compiled the 10+ most useful tools for all your CSS3 coding.

CSS3 Pie

Are you surprised that Internet Explorer 6/8 CSS3 support is almost non existent? I guess most of you aren’t. Unfortunately, some clients may want you to create a website that look like in a modern browser in IE. This is when CSS3 Pie is useful: It allows you to use most of the CSS3 cool features on IE.
→ Visit CSS3 Pie

CSS3 Builder

With this tool, you can design complex CSS3 boxes using an interface looking exactly like the one used for applying Photoshop effects. Definitely a great tool to save lots of time.
→ Visit CSS3 Builder

CSS3 Drop shadow generator

This one is quite similar to CSS3 builder, just use the sliders to visually design your drop shadow. Once done, just copy the CSS code which have been automatically created. Paste it to your css file, and you’re ready to go!
→ Visit CSS3 Drop shadow generator


This tool isn’t CSS3 specific, but it is so useful that it would have been a shame not to include it on that list. Cascader lets you input some HTML code and it will detect all inline CSS, remove it from the HTML and add it to a separate stylesheet. A true time saver for those looking for clean HTML.
→ Visit Cascader

Border Radius.com

border-radius is one of the most popular CSS3 properties. Those who remember how boring it was to create boxes with rounded corners using images certainly know why. This tool allow you to quickly create a box and get the appropriate CSS3 code.
→ Visit Border Radius.com

Button Maker

CSS3 allows you to create awesome buttons. 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.
→ Visit Button Maker

CSS3 Generator

Need help with CSS3 declarations? This very handy generator helps you create declarations for most popular CSS3 properties: @font-face, RGBA, text-shadow, border-radius, and more.
→ Visit CSS3 Generator


Modernizr is a small script that detect support for CSS3 and adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. For example, if the browser does not support the multiple backgrounds functionality, a no-multiplebgs class will be added to the <html> element. then it will be pretty easy for you to fall back.
→ Visit Modernizr

HTML5 & CSS3 Support

Need to know if Internet Explorer 8 supports the text-shadow property? Just have a look to this very useful chart, which reveals CSS3 support for all major browsers. Definitely a page to have in your bookmarks!
→ Visit HTML5 & CSS3 Support

CSS3 Gradient Generator

As you can guess, this tool is a gradient generator. Just pick your colors using the picker, preview it in the preview area, and grab your ready-to-be-pasted code. It’s easy as that!
→ Visit CSS3 Gradient Generator

CSS3 Please

CSS3 Please is another very helpful site which allow you to copy and paste most common CSS3 declarations. It also has a preview area so you can live test your declarations.
→ Visit CSS3 Please

CSS3 Cheat Sheet

When coding, cheat sheets are very helpful to quickly remember properties and their syntax. Smashing Magazine has created this CSS3 cheat sheet that you can download and print. A preview version in .gif format is also available here.
→ Visit CSS3 Cheat Sheet

  • jp

    Jean, thanks for featuring our curved drop shadow generator 🙂 It’s an honor to be featured here !
    and of course, thanks for the showcase, didn;t know about some of these !

    keep the good work !

  • I think you forgot the http://www.css3.me/
    It’s very useful and the design is awesome.

    Anyway, thanks for share these good web tools.

  • Thanks for the great information. Bookmarked. I’ve been using Cascader for a while now. Excellent tool. Have you seen http://projects.korrelboom.com/gradient-generator? I use it all the time, but I’ll give the one you’ve featured here a go.

  • Useful list J-B, but you missed one of the best:

    Ultimate CSS Gradient Generator : http://www.colorzilla.com/gradient-editor/

    • Definitely a great tool, thanks!

    • Agreed. Though I’ve played with all of the tools listed here (and many others), Ultimate is the only tool I’ve ever used more than once.

  • Fantastic list! Will come in very handy!

  • Wil

    Definitely a great list, but I’m missing selectivizr here. It enables css3 in IE. I find it really useful, been using it in combination with Prototype. http://selectivizr.com/

  • Pablo Mendoza

    I also check this page for HTML5 & CSS3 support table: http://caniuse.com/

  • Scott Haselton

    http://www.css3designer.com handles a lot of these features as well.

  • Cool tools. Like the Drop Shadow generator.

    Thanks for sharing

  • verbatim

    Another great resource that really helps me is:
    from the site: “CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.”

    Browser specific styles, all on one stylesheet, NO HACKS. best of all: all CSS validates.

  • Agreed. Though I’ve played with all of the tools listed here (and many others), Ultimate is the only tool I’ve ever used more than once.

  • Abe

    Very helpful info about handy web tools.
    Thanks for share these.