Six Useful CSS3 Tools

By / Aug 5, 2010 / Tools

CSS3 continues to gain popularity as we’re seeing it used in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers. Nevertheless, if you’re one of those that haven’t started using CSS3 or you’re a CSS3 pro just looking to speed up your work flow, here are six CSS3 tools that you should find useful.

CSS3 Button Maker

css3 tools

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Generator

css3 tools

Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview.

CSS3 Please!

css3 tools

CSS3 Please! is a CSS3 rule generator that acts as a sort of playground. It allows you make various CSS3 tweaks and see a live preview. Then you can copy and paste into your own file.

CSS3 Gradient Generator

css3 tools

The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS3 Transforms

css3 tools

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Selectors Test

css3 tools

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • http://www.rainbowlemon.co.uk Aidan

    This one’s also useful, for IE 6-7 compatibility : http://css3pie.com/

  • wesley

    Hi, thanks for this list!
    Just wanted to point out though that the first one doesnt link well.. Handy tools nonetheless!

  • http://moox.fr/ Mr.MoOx

    Great but… YOU FORGOT CSS3PIE !
    http://css3pie.com/
    :)
    So 7 tools ^^

  • http://www.gmbhnews.com iphone news reader

    Thanks for this great list Henry, I’ll be using some of those tools in my next project, this could have make my life really easier on my past projects. Thanks for sharing

  • http://www.naumanakhtar.com Nauman Akhtar

    looks nice, so cool and fluffy :)

  • mstrb

    Links for “CSS3 Button Maker” and “CSS3 Selectors Test” are messed up. nice post nontheless.

  • Jesus

    Awesome thanks, the first link just needs an “h” at the beginning (currently begin as “ttp://..”) and works.

  • http://henryjones.us Henry

    Thanks to those that pointed out the missing “h” on the first link. It’s fixed.

  • http://christianross.net Christian Ross

    One I use regularly for quick coding: http://border-radius.com/

  • http://www.mp-webdesign.co.uk Damian Smith

    Nice tutorials, I’m loving CSS3 and HTML5, but I am a big fan of w3c compliance and do not want to place CSS hacks on my sites. So its a shame that only certain browsers will show any CSS3 that I use. But eventually when more browsers support it the websites will magically begin to look better!

    I still think these tutorials will benefit me though, I will just leave out the css fixes and make sure it still looks “ok” on the non supported browsers but great on supported browsers.

    In my opinion it does not always matter that a drop shadow does not appear on some browsers and does on others or curved edges etc, as long as it still looks ok and people wouldn’t even think, “ooooh there should be a shadow on that” then it’s all good. Better to have clean CSS in my opinion!

    :) thanks for sharing

  • Gotah

    Thanks, great article.

    The link on the image “CSS3 Selectors Test” is fail : “hhttp://tools.css3.info/selectors-test/test.html”

  • http://www.dharne.com/blog/ Nathan Williams

    Thanks for a comprehensive list of CSS tools. The CSS3 generator has been especially helpful in my work. Look forward to more. Great post Henry!

  • http://www.louisvuittonhouse.com/ vuitton

    Just keep in mind .. it will get better one day

  • http://www.securityking.com Craig

    Great list, have never tried these out before so may try a test of these soon, Great share

  • http://www.craigfordham.net Lisa Thomason

    Excellent list, really nice share, takes the head-ache out of calculations. LT

  • http://www.cardsoftware.net Amanda Smit

    Thank you for this comprehensive list of CSS3 tools. CSS3 generator is a favourite!

  • http://www.tristarwebdesign.co.uk/ Chand

    Thank you for the fab list of CSS3 tools. Loving the idea of the CSS3 Button Maker and the CSS3 Gradient Generator. Makes life a lot more easier with some of these tools generating the code for you.

    :) Great stuff. Thank you once again.

  • http://www.heavyhookedup.com Brian

    Great Resource, nice one, thanks mate

  • http://www.eddturtle.co.uk Edd Turtle

    Good job on the article :) Actually brilliant tools which I use regularly, I also use the Buttonize Framework from creating buttons with CSS3 @ http://css3framework.co.uk

  • http://www.manzwebdesigns.com Tom Foolry

    Great article! These will really help me in putting my new website together. I haven’t really done much web design at all, but this will be a great help to me!