Aller au contenu principal

    我们使用Cookie

    我们使用Cookie来改善您的体验。继续浏览即表示您接受其使用。

    在我们的 Cookie 和 隐私

    网格渐变

    创建多彩网格渐变。 免费在线使用 网格渐变，无需注册，在浏览器中快速安全处理。

    Preview

    Color points

    Point 1
    Point 2
    Point 3
    Point 4

    CSS Code

    background-color: #ffffff;
background-image: 
    radial-gradient(at 20% 20%, #667eea 0px, transparent 50%),
    radial-gradient(at 80% 20%, #764ba2 0px, transparent 50%),
    radial-gradient(at 50% 80%, #f093fb 0px, transparent 50%),
    radial-gradient(at 20% 80%, #f5576c 0px, transparent 50%);

    网格渐变 可帮助你直接在浏览器中处理颜色。

    该工具适合需要快速可靠结果的设计师、开发者和创作者。

    Supported formats

    CSS
    PNG
    SVG
    Tailwind

    How it works

    1

    Step 1

    打开 网格渐变

    2

    Step 2

    输入或导入颜色

    3

    Step 3

    复制、导出或复用结果

    要避免的常见错误

    • 忘记检查对比度可能影响可读性。
    • 使用过多颜色会让调色板更难应用。

    专业技巧

    • 将主色保存为 CSS 变量。
    • 发布前在浅色和深色模式下测试调色板。

    Privacy guaranteed: everything is processed locally in your browser.

    处理会尽可能在浏览器本地完成。无需账户。

    用于颜色项目的网格渐变

    创建多彩网格渐变。

    无精度损失的网格渐变

    转换基于精确值（HEX、RGB、HSL、OKLCH）。无视觉近似——颜色完全忠于您的设计意图。

    免费在线网格渐变

    无需注册，无需下载软件。网格渐变100%免费，可在任何浏览器中使用。免费方案每天可使用10次。

    快速安全的网格渐变

    处理直接在浏览器内完成，速度极快。数据不会发送到服务器，您的颜色与文件保留在本地设备上。

    用于分享与协作的网格渐变

    将结果导出为 HEX、RGB、HSL、CSS、JSON，或一键复制。非常适合与团队共享颜色规范或记录设计系统。

    探索所有颜色工具

    只需几次点击即可提取、转换颜色，生成调色板、渐变和 WCAG 对比度。

    查看所有工具

    Related tools

    CSS渐变
    动画渐变
    玻璃拟态
    色彩情绪板

    指南和教程

    通过详细指南学习如何使用我们的工具。

    mesh-gradient：gradients实用指南

    本地化指南，帮助你使用 mesh-gradient、理解 gradients 最佳实践并避免常见错误。

    mesh-gradient：gradients实用指南

    本地化指南，帮助你使用 mesh-gradient、理解 gradients 最佳实践并避免常见错误。

    mesh-gradient：gradients实用指南

    本地化指南，帮助你使用 mesh-gradient、理解 gradients 最佳实践并避免常见错误。

    Frequently asked questions

    是的，该工具可免费在线使用。

    为保护数据，处理会尽可能在浏览器中完成。