WebKit从图像梯度

Question

有谁知道是否有一个工具将拍摄图像（.png，.gif等）并输出图像包含的渐变？

我真的很想在css中重新创建这个图像。看起来像是线性和径向渐变的混合，并且超出了我的css技能

Answer 1

开始使用这个工具 http://gradients.glrzad.com/，然后阅读有关径向渐变这里使其径向http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

你可以走这么远与工具：

-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% 
) 

然后使其径向，只有Mozilla浏览器这里

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

这里是什么样子 图像

Answer 2

从任意图像获取渐变对于任何图像处理器来说都会很困难。通过获取图像的像素数据，找到顶部和底部像素，将颜色数据拉出来，然后使用这些值创建渐变，您可能会获得更好的运气。

Answer 3

你的例子是两个径向梯度的重叠。有一个白色到中等蓝色的光圈，以不透明的径向渐变为中心在按钮上方，中间不透明;在简单的蓝色到白色径向渐变的顶部，居中到右下角。