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
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
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 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
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 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 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.
This one’s also useful, for IE 6-7 compatibility : https://css3pie.com/
Hi, thanks for this list!
Just wanted to point out though that the first one doesnt link well.. Handy tools nonetheless!
Great but… YOU FORGOT CSS3PIE !
https://css3pie.com/
🙂
So 7 tools ^^
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
looks nice, so cool and fluffy 🙂
Links for “CSS3 Button Maker” and “CSS3 Selectors Test” are messed up. nice post nontheless.
Awesome thanks, the first link just needs an “h” at the beginning (currently begin as “ttp://..”) and works.
Thanks to those that pointed out the missing “h” on the first link. It’s fixed.
One I use regularly for quick coding: https://border-radius.com/
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
Thanks, great article.
The link on the image “CSS3 Selectors Test” is fail : “hhttps://tools.css3.info/selectors-test/test.html”
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!
Just keep in mind .. it will get better one day
Great list, have never tried these out before so may try a test of these soon, Great share
Excellent list, really nice share, takes the head-ache out of calculations. LT
Thank you for this comprehensive list of CSS3 tools. CSS3 generator is a favourite!
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.
Great Resource, nice one, thanks mate
Good job on the article 🙂 Actually brilliant tools which I use regularly, I also use the Buttonize Framework from creating buttons with CSS3 @ https://css3framework.co.uk
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!