在CSS / Jquery中创建渐变网格
我不确定这是否可行，但我可以使用CSS / Jquery技术来创建渐变网格吗？ 类似的东西 
我想随机生成这个网格然后可能为它设置动画，所以我试图避免使用图像。 我不确定这样的事情是否可行。
我在考虑创建几层单独的渐变，然后将它们一起分层到一个固定的位置并改变它们的不透明度设置？
现在
几年前，我使用SVG，HTML5canvas标签以及最近的CSS3渐变来尝试这些方面。 我不相信目前有一种超越简单线性或径向渐变的自然方法。
问题是，是否可以仅使用简单的线性和径向渐变（这是唯一可用的工具）来模拟网格渐变。
不幸的是，当你使用不透明度或rgba组合多个渐变时，不同渐变的颜色倾向于以一种无用的方式组合，从而导致褪色。 避免这种情况需要能够在浏览器中将其作为单个复杂渐变进行渲染。
梯度可以具有显着的局限性 – 任意角度的线性梯度和径向对称的椭圆梯度。 也不允许自由形状的不规则形状。 可以应用于结果图像的2D变换在性质上也是相当规则的（缩放，倾斜等）。
在将来
我不知道在不久的将来最有希望的选择是可能支持SVG 2.0中的网格渐变（也可能是扩散曲线）。 如果确实发生这种情况并且最终得到浏览器的支持，那么应该开始大大扩展选项。 之后很快就会出现HTML5 canvas标签和CSS3。
正如@vals在下面的评论中指出的那样，WebGL应该提供一些非常有前景的选项（对于使用3D上下文的HTML5canvas标签）。
相关链接
我做了一个简单的布局来说明这一点。
首先，我将放置4个div，第一个显示部分结果，最后一个显示最终结果。 标记只是：
这里的框仅用于尺寸，mesh1到3保持部分结果，在网格中我们将它们全部放在一起。
CSS是：
.box { width: 400px; height: 150px; position: relative; display: inline-block; } .mesh1, .mesh { background: -webkit-linear-gradient(5deg, rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5)) } .mesh:after, .mesh:before { content: ""; position: absolute; left: 0px; bottom: 0px; top: 0px; right: 0px; } .mesh2, .mesh:after { background: -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 100%);} .mesh3, .mesh:before { background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);}
我给mesh1类一个背景线性，倾斜5度，并指定rgba格式的颜色以允许透明度。
然后，为了能够覆盖更多的渐变，我指定了前后的伪元素，共享相同的布局属性。
对于after元素，我给出一个圆形渐变，与mesh2共享。对于before元素，我给出一个椭圆渐变，偏离中心。 所有这些都可以是rgba。
最后，您在网格div中看到重叠所有内容的结果
（我已经到处使用webkit表示法来缩短它）
我不会说这很有艺术性，但我把这部分留给你:-)
在这里小提琴
在我的第一个答案中，我认为这更多地是以“艺术”方式而不是“数学”方式。 Matt Coughlin的答案让我想到了一个更加数学化的答案，我们会把这个要求的“网格”部分更加严谨。
也就是说，我们有一个颜色矩阵，我们希望在网格中显示它。 如果网格的间距为100px，则矩阵的颜色[x] [y]将以100x和100y的forms给予像素。 中间的像素将以双线性方式进行近似。
对于这种方法，css将是：
.mesh { overflow: hidden; position: absolute; width: 300px; height: 300px; } .tile { width: 200px; height: 200px; position: absolute; display: block; } .tile11, .tile21, .tile31 { left: -50px; } .tile12, .tile22, .tile32 { left: 50px; } .tile13, .tile23, .tile33 { left: 150px; } .tile11, .tile12, .tile13 { top: -50px; } .tile21, .tile22, .tile23 { top: 50px; } .tile31, .tile32, .tile33 { top: 150px; } .tile11 { background: -webkit-radial-gradient(center center, 100px 100px, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0.5) 50%, rgba(255, 0, 0, 0) 100%);} .tile12 { background: -webkit-radial-gradient(center center, 100px 100px, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0.5) 50%, rgba(255, 0, 0, 0) 100%);}
我使用每个div作为网格的本地贡献者，只是“触摸”中间邻居，并在此之后达到完全透明。
结果如下：
小提琴
2种第一种颜色都是红色的测试。 在一个完美的系统中，连接2个点的线应始终是完美的红色。
确实，这不是一个完美的结果，但结果的“混乱”或“淡态”或多或少地避免了