CSS to png generator [closed]

Question

I love all of the gnarly CSS3 background things that people are doing. But what I want to do is this:

1: Design a cool background using CSS3.
2: Export it to png/gif so that you can use it with all browsers.
3: Set up a cool script which converts the CSS3 to pngs automagically for older browsers.

Ok, so I've been researching this, and there seems to be a plurality of tools which convert png to CSS3, but none which do the reverse. Basically, I'm looking for the logical inverse of this:

http://www.stubbornella.org/content/2011/04/25/css-3-gradients/

Does anyone have any advice?

Thanks!

Answer 1

You can use PhantomJS: https://github.com/ariya/phantomjs/wiki/Screen-Capture

phantomjs rasterize.js gradient.html gradient.png

Answer 2

Not really a generator, but you could do this:

1. Download and install latest Firefox
2. Install Firefox plugin called Abduction - https://addons.mozilla.org/en-US/firefox/addon/abduction/?src=api
3. Design your background using CSS3
4. Load that background in Firefox
5. Right click your page, select "Save Page as Image"
6. Save your image as PNG