WebKit gradient from an image

Question

Does anyone know if there is a tool that will take an image (.png, .gif, etc) and output the gradient that the image contains?

I really want to recreate this image in css. Looks like a mix of linear and radial gradients and is beyond my css skills

Answer 1

Getting the gradient from a random image is going to be tough for any image processor. You would probably have better luck by getting the pixel data for the image, finding the top and bottom pixel, pulling the color data out of them, then using these values to create your gradient.

Answer 2

Get started with this tool http://gradients.glrzad.com/ and then read about radial gradients here to make it radial http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

You can get this far with that tool:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(68,214,254)),
    color-stop(0.49, rgb(53,150,230)),
    color-stop(0.51, rgb(123,180,236)),
    color-stop(1, rgb(255,255,255))
)
-moz-linear-gradient(
    center bottom,
    rgb(68,214,254) 0%,
    rgb(53,150,230) 49%,
    rgb(123,180,236) 51%,
    rgb(255,255,255) 100%
)

Then make it radial, mozilla only here

-moz-radial-gradient(right bottom, 
   ellipse, 
   #44D6FE 0%, 
   #3596E6 49%, 
   #7BB4EC 51%, 
   #FFFFFF 100%) repeat scroll 0 0 transparent

and here is an image of what it looks like

Answer 3

Your example is an overlap of two radial gradients. There is a white to mid-blue stop to opaque radial gradient centered above the button with a mid-opacity; on top of simple blue to white radial gradient centered to the bottom right.