如何制作与图像中相同的CSS3线性渐变？

Question

如何制作与图像中相同的CSS3线性渐变？

css

3

例如，这是我想在CSS3中制作的渐变效果。 enter image description here

以前我们可以使用1像素的图像切片并在x轴上重复，但现在如果我想使用CSS3制作完全相同的渐变效果。

我知道互联网上有很多免费的CSS3渐变生成器和制作工具。我的问题是哪个生成器最受欢迎，如何使用它来制作所需的渐变效果。

在Alex回答后编辑：更多渐变效果 enter image description here

- Jitendra Vyas

3个回答

0

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

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

- Yoann

0

我将推荐四个CSS3渐变生成器来完成这项工作。还有其他的生成器，但它们不如以下的好。

在所有这些工具中，gradientoo似乎是最用户友好和易于使用的。它提供了线性、径向和椭圆形CSS3渐变(跨浏览器兼容)。它也可以作为Firefox的附加组件使用。其中一个生成器就能完成你的工作(这是我的个人意见，你可能会有所不同；我还必须提到，gradientoo是由我开发的)。

- GILL

当推荐你开发的东西时（这个回答建议你是：https://dev59.com/80jSa4cB1Zd3GeqPGYwr#9720644），通常最好声明它... - forsvarir

那是四个生成器，不是三个。 - rickyduck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alex · Accepted Answer

终极CSS渐变生成器是我首选。

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

使用这种渐变色非常简单。你可以看到它从顶部开始是一种颜色，然后逐渐向下过渡到另一种颜色。只需将顶部和底部的颜色复制并粘贴到生成器的相应输入框中即可。