CSS 3 is full of ways to reduce our dependence on background images, one of which is pure CSS gradients. They have several features, which I’m sure designers are salivating over, like multiple color stops, and angled, radial, and linear gradients. Many people had built cool designer-focused tools to make interacting with a somewhat confusing gradient syntax a little easier. The issue for me has been that I’m not a designer. I generally work off of photoshop comps or (when doing big re-architecture projects) the site itself, as if the old version were a design. This means that, for the most part, I was trying desperately to match CSS gradients to an image with zero information about how that image would have been created. Because of my focus on fixing old and broken CSS, the original designer may not even still work at the company.
If you don’t know what I mean, picture me with a color picker going pixel by pixel to try to figure out by hand where the color stops should be and what colors I should use versus extrapolate. Then, for each version, making an image of the gradient I’ve created, blowing it up so I can compare it to the image of the original. Rinse, repeat until I’ve come up with something that kinda, sorta approximates the original. Oh yeah, painful.
Which lead me to tweet the following:
There was a lot of response, many people re-tweeted saying that if I found such a tool, they wanted to know about it! Several others said it was interesting, but that the more complex cases would be difficult to navigate. Twelve hours later, Philip Tellis had gone from not knowing what a CSS 3 gradient was, to writing an open source command line tool to convert png to CSS. It solved for linear gradients, which is exactly what I needed to fix the performance of sites whose that had gotten sloggy. Most of these sites used linear gradients as images, which are notoriously difficult to sprite.
I was excited, to give it a try, and also, a little nervous to once again meet my nemesis, the command line. Then, before I could blink Zoompf took Philip’s BSD licensed code and created a hosted version (w00t! hosted version!):
In the mean time, Colorzilla, creators of several fab tools for designers, had also gotten word about my plea for a conversion tool, and they thought it would be a great addition to their own functionality. A couple days later they tweeted that they had a prototype up:
Perhaps I’m being a little too Californian, but I have a warm fuzzy feeling about our community. I think one of the biggest challenges we are going to face is the lack of tools we have relative to other communities. So when we can come together to build tools that will save loads of developer time, I kind of love it. Even better, Philip’s choice to open source his work meant that others were free to expand upon it.
Is anyone else doing something really cool with CSS 3 gradients? I’d love to hear more about it. The CSS 3 Pattern Gallery kind of blew my mind. With every example, the boundaries of what is possible expand.
Comments
12 responses to “Automating CSS 3 Gradients”
This is pure awesome sauce — just last week I was (like you) color picking from an image and taking my best guess at color stops, wishing that a tool like this existed. Clearly I should have tweeted my frustration!
Great stuff.
BTW:Is it just me or do those CSS3 Patterns work in none of my preferred browsers? I’ve gotten so use to *at least* Safari supporting CSS3 extensions, only to find they don’t work in Mac Safari 5.04, nor my Firefox 3.6.15.
It would be better if Adobe had anticipated this to begin with and built the functionality directly into Photoshop!
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.
@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.
Great! This will be a soooo helpful.
[…] 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. […]
Hi Nicole,
This one is a pretty recent tool seems quite useful for getting the gradient out of an image http://gradient-scanner.com/
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
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
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).
This is a very cool tool — nice work..
And @Stephanie I will be forcing that upon my designer 😉
Dan