Comments on: Automating CSS 3 Gradients

By: Daniel Carper

Daniel Carper — Wed, 04 May 2011 13:26:17 +0000

This is a very cool tool — nice work..

And @Stephanie I will be forcing that upon my designer

Dan

By: Stephanie Rewis

Stephanie Rewis — Sat, 30 Apr 2011 00:08:59 +0000

Awesome work!!

For those of you that need radial gradients—if you have Illustrator you can add the Illustrator HTML5 pack (available on labs.adobe.com but you may have to search for it). Then you can export the gradient code directly from Illy (radial and linear).

By: Paul Boutin

Paul Boutin — Fri, 29 Apr 2011 13:32:09 +0000

Anyone know if there is a radial gradient css generator out there? All of theses tools work great for linear gradients. I need one for radial.

Thanks

By: Stanislav

Stanislav — Thu, 28 Apr 2011 22:06:52 +0000

Hey, i’ve build a browser based tool. This one has also some limitations and the export is not quite good tested at the moment. But it’s on github and open for collaboration

Here is the link: https://github.com/lifedraft/image_to_css_gradient

PS: You have to download it and open it locally with safari to get it working

Best,
Stanislav

By: ionut popa

ionut popa — Thu, 28 Apr 2011 10:06:39 +0000

Hi Nicole,
This one is a pretty recent tool seems quite useful for getting the gradient out of an image http://gradient-scanner.com/

By: Degradados CSS3 | ceslava - Diseño y Formación

Degradados CSS3 | ceslava - Diseño y Formación — Wed, 27 Apr 2011 10:38:02 +0000

[...] Hasta ahora los diseñadores utilizábamos herramientas como Photoshop o Fireworks para crear las imágenes que reproducen estos degradados al ponerlas repetidas veces como fondo. Nicole planteaba en su Twitter si no era posible generar ese código del degradado CSS3 desde una imagen. [...]

By: Mario Vazquez

Mario Vazquez — Wed, 27 Apr 2011 09:51:31 +0000

Great! This will be a soooo helpful.

By: Philip

Philip — Wed, 27 Apr 2011 03:33:05 +0000

@Marco: Safari has its own gradient syntax which isn’t quite compatible with the standard that all the other browsers support. This is largely due to the fact that they were pioneers in the gradient field. They invented a syntax that unfortunately wasn’t accepted as the standard (and in this case I think the standard turned out right), but for backwards compatibility reasons, they can’t just drop their version.

Note that WebKit has had the current syntax for several months now, so I suppose it shouldn’t be too long for Safari to import it… it might just be a matter of figuring out how to support both for some time at least.

By: Paul Steffens

Paul Steffens — Wed, 27 Apr 2011 02:01:10 +0000

Wonderfull! Last week I too was converting images to gradients and got a bit miffed by the lack of pixel support in Safari. It let me to suggest to the Modernizr team to drop support for the old webkit syntax (which is not part of the current w3c draft) in their cssgradient test since that gives a false positive when using pixels on Safari.

By: Kevin Sweeney

Kevin Sweeney — Tue, 26 Apr 2011 16:16:47 +0000

It would be better if Adobe had anticipated this to begin with and built the functionality directly into Photoshop!