如何在图像中制作精确的CSS3线性渐变？

Question

例如，这是我想在CSS3中制作的渐变

我可以使用1像素图像剪切并在x轴上重复，就像我们之前做的那样。但现在如果我想使用CSS3制作相同的渐变。

我知道很多免费的CSS3 Gradient Generator，Maker可以上网。我的问题是哪个发电机是最受欢迎的，以及如何使用它来制作所需的渐变。

在Alex回答后编辑：更多渐变

Answer 1

Ultimate CSS Gradient Generator是我的首选。

background: #CCCCCC; 
background: -moz-linear-gradient(top, #CCCCCC 0%, #343434 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%,#343434));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#343434',GradientType=0 );

使用上面的渐变很容易。您可以看到顶部有一种颜色，底部有一种颜色。只需复制顶部和底部颜色，并将它们放入发生器的相关输入中。

Answer 2

线性渐变应该可以正常工作：

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#343434));
background: -moz-linear-gradient(top,  #ccc,  #343434);

Answer 3

我会为这项工作推荐四个css3梯度生成器。还有其他发电机，但它们并不是那么好。

1. Gradient generator来自glrzad.com
2. Ultimate gradient generator在colorzilla主页
3. Gradient generator hosted at microsoft
4. gradientoo。

在所有这些中，gradientoo似乎是最用户友好且易于使用的。它为您提供线性，径向和椭圆CSS3渐变（所有跨浏览器）。它也可以作为Firefox的附加组件使用。其中一个发电机将完成你的工作（这是我个人的意见，你可能会有所不同;我还必须提到我的我是开发了渐变器）