CSS网格渐变生成器
从四个角落颜色创建柔和的多色网格渐变，以径向渐变层堆叠在基础颜色上 — 具有可调节的混合大小、衰减和可选的谷物覆盖（或SVG格式）。
输入
角落颜色
网格后面显示的背景色。
网格设置
较大的值会创建更柔和、更分散的色块。
每种颜色淡入透明的位置（较低 = 边缘更锐利）。
输出格式
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-mesh-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colorTopLeft": "#ff6b6b",
"colorTopRight": "#feca57",
"colorBottomLeft": "#48dbfb",
"colorBottomRight": "#5f27cd",
"colorBase": "#1a1a2e",
"blendSize": "60",
"falloff": "50",
"enableGrain": "",
"grainIntensity": "25",
"outputFormat": "css"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-gradient-mesh-generator` tool (CSS Gradient Mesh Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-gradient-mesh-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS网格渐变生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是网格渐变？
网格渐变（也称为"渐变网格"或"色块渐变"）是一种通过将多个颜色点混合在一起而不是单一直线或径向渐变创建的柔和多色背景。而普通的CSS linear-gradient 或 radial-gradient 仅沿着一个轴在两个或三个色标之间平滑过渡，网格渐变可以在整个框中分散颜色 — 这种效果在Stripe的营销页面、Mesher和无数"极光"或"色块"英雄背景中流行。
此工具使用纯CSS构建效果：四种不同的颜色，各锚定在一个角落（左上、右上、左下、右下），每种颜色作为自己的 radial-gradient() 图层呈现。将所有四个图层作为以逗号分隔的 background-image 图层堆叠在纯色基础颜色上方，生成柔和的绘画式混合 — 无需图像、画布或运行时JavaScript。
如何使用此工具
- 为四个角落颜色 — 左上、右上、左下、右下 — 各选择一种颜色，加上基础颜色，该颜色显示在角落色块无法到达的地方。
- 调整混合大小 % 以控制每种颜色在淡入透明前的传播距离 — 较大的值创建更大、更柔和、更重叠的色块。
- 调整衰减 % 以控制每个色块褪色的速度 — 较小的值产生更锐利、更集中的颜色点；较大的值逐渐扩散颜色。
- 可选地启用添加谷物覆盖并设置其强度以获得现成的噪声纹理配方（内联SVG
feTurbulence过滤器）进行分层 — 这是现代网格渐变英雄部分中的流行修饰，可防止平面颜色混合看起来过于清洁/条纹化。 - 选择输出格式：
CSS提供可直接粘贴到样式表的background-color+ 分层background-image声明；SVG提供带有四个<radialGradient>定义的独立<svg>— 当您需要网格作为图像资产而不是动态CSS背景时有用。 - 复制生成的代码或下载，并将其放入您的项目。
输出会在您调整任何控制时实时更新 — 没有单独的"生成"步骤。
为什么是四个角落？
四个锚定在角落的色块是最简单的排列方式，仍然看起来像真正的"网格"而不是单个色块或两色对角线褪色 — 框的每个角落都有自己的颜色，中间成为自然混合区域。这也使生成的CSS保持简洁：四个 radial-gradient() 图层，无额外标记，无需维护的定位数学。
常见问题
这在所有浏览器中都能工作吗？
是的。分层 radial-gradient() 背景和多个逗号分隔的 background-image 值已在所有主要浏览器中得到多年支持 — 不需要供应商前缀。
我可以使用超过四种颜色吗？ 不能使用此工具 — 它是围绕四角情况构建的，涵盖了绝大多数网格渐变用例，同时保持易于手动读取和编辑。对于网格渐变，您仍然可以根据需要调整四种颜色中的任何一种。
CSS和SVG输出之间有什么区别？
CSS输出是一个 background 声明，旨在直接粘贴到样式表或 style 属性中 — 作为动态、分辨率独立的背景呈现。SVG输出是独立的图像（带有径向渐变定义的 <svg> 元素）— 当您需要网格渐变作为文件或嵌入式图像而不是动态CSS背景时使用。
为什么我的谷物覆盖是单独的CSS块而不是烘烤到背景中？
谷物最好用作网格顶部的 mix-blend-mode: overlay 定位子元素，这样噪声混合到下方的颜色中而不是替换它们。该工具输出现成的 .mesh-grain 规则（噪声预先编码为内联SVG数据URI）— 在梯度容器内添加具有该类的子元素。
隐私
一切都在您的浏览器中进行。您选择的颜色和设置永远不会发送到服务器 — CSS或SVG是在您调整控制时在本地生成和更新的。