If you’ve used jsfiddle before, its a bit like that, but with some very amazing and useful CSS tools. Dabblet, created by Lea Verou, is an in-browser based editor for playing with CSS and HTML. It allows you to define your HTML elements and then style them with CSS. The coolest feature of dabblet is the preview features. When you hover your mouse over parts of the CSS different previews display, giving you a glimpse into what is going on in your code. These previews display things like images, gradients, fonts, sizes and even animation curves.

Dabblet is also a great way to test out your little web projects. Have an idea you’d like to implement with CSS? Let Dabblet be the playground that you build that sand castle in. Want to show that new technique off to a friend? Shoot them the link and they can take a look or even edit it.

The web app has very cool GitHub Gist integration that allows you to save your dabblets as gists, to your GitHub account, or anonymously. For example, here is the dabblet and gist for the sample image below.

Make sure to check out the dabblet help page for more useful information. Also, the source for dabblet is available on GitHub.