Random thoughts of wisdom - the personal blog of Michael Holm Andersen

It’s pretty safe to use CSS3 on your website!

Today most browsers support CSS3 / HTML5 (..even though the biggest limiting factor of course still is – older – versions of Internet Explorer!)

And with the vast array of online CSS3 generators there really is no excuse for still using PNG and other old techniques to achieve dropshadows, rounded corners, gradients etc.

In part due to the CSS vendor prefixes (or CSS browser prefixes) it’s a bit of a hazzle to create the CSS for using many of the CSS3 features manually – If you’re not familiar with browser prefixes, they are used to add new features, that may not be part of a formal specification, and to implement features in a specification that hasn’t been finalized. The CSS browser prefixes are:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-


So in order to encourage the use of CSS3 – Here’s a list of my favorite CSS3 online tools:

2014-10-03 14_40_53-Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS is an advanced CSS3 generator which is capable of creating dropshadows, rounded corners, gradients, animations and much more – furthermore it contains a gallery which contains a variety of pre-defined buttons, text inputs etc.


2014-10-03 14_43_47-CSS3 Generator was created by Randy Jensen and can also create dropshadows, rounded corners, gradients and animations – the interface is a bit more “rough” than e.g. EnjoyCSS, however it’s still pretty capable.


2014-10-03 14_48_36-CSS Animation _ CSS 3.0 Animation _ Animation _ Animation Generator is pretty cool! – It supports most CSS3 features including simple animation. Furthermore it shows Browser Compatibility for each feature etc.


2014-10-03 14_47_13-Ultimate CSS Gradient Generator -

Do you need gradients? Take a look at which is “A powerful Photoshop-like CSS gradient editor” – it handles both radial and diagonal linear gradients, and the new version 4 even support multi-stop gradients for IE9 (using SVG). Awesome!


2014-10-03 14_50_16-Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser is a CSS Easing Animation Tool and my favorite for creating “ease-in .. ease-out” animation, mostly due to the fact that it supports the classic Penner equations known from Flash and jQuery (which is waaay better than the standard “ease-in” / “ease-out”) – and the bezier editor is just awesome!

If you’re worried about which CSS3 properties are supported in which browser – take a look at the CSS3 Browser Support Reference – it’s updated and tested regularly with all major browsers.


2014-10-03 15_00_25-Modernizr_ the feature detection library for HTML5_CSS3 Talking about CSS3 support. A useful JavaScript tool for implementing CSS3 fallbacks is Modernizr. For anyone working with CSS3 on a production website it’s essential.
Modernizr enables you to use CSS3 for properties where it is supported, and to provide sensible alternatives where it is not! – really cool and worth using.


2014-10-03 15_01_15-CSS3 PIE_ CSS3 decorations for IE

As they write on the website: “PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.”

In orher words: It can save you the hassle of having to use JavaScript hacks to achieve certain effects in IE.


So there you have it! – some of my favorite online CSS3 tools .. now go tweak those gradients! Smiley

Peger op Do you have any tips or advice about CSS3 or some cool tool which should be on the list? Leave a comment and share your recommendations!

Comments are closed