May 11, 2021

Six Useful CSS3 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.

Share

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

20 Comments

  1. wesley Reply

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

  2. Jesus Reply

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

  3. Damian Smith Reply

    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

  4. Gotah Reply

    Thanks, great article.

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

  5. Chand Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *