Softonic

网格渐变生成器

使用 4、6 或 9 个可移动色点创建平滑的多色背景。为每个点选择颜色，在画布上拖动位置，尝试精心搭配的随机色板，再将结果导出为 SVG 或 PNG。你也可以复制由多层径向渐变组成的 CSS 近似效果。编辑期间，项目仅保留在当前浏览器标签页中。

如何创建网格效果渐变

  1. 1

    选择点阵

    从 4、6 或 9 个控制点开始。点越多，可形成的色彩区域越丰富。

  2. 2

    选择颜色

    使用每个控制点的取色器。编辑器以六位 HEX 值保存颜色。

  3. 3

    移动控制点

    拖动控制点、输入水平和垂直位置，或使用方向键移动。

  4. 4

    选择尺寸

    为 SVG 和 PNG 选择横向、宽屏或正方形尺寸。

  5. 5

    导出设计

    下载 PNG 或 SVG，或复制使用径向渐变的 CSS 近似代码。

三种输出的渲染方式

  • PNG 使用与画布预览相同的距离加权混色方式。若所选输出采用不同的宽高比，同一组相对位置会按新尺寸重新绘制。
  • SVG 在相同控制点上叠加径向渐变，放大后仍能保持清晰。
  • CSS 在底色上为每个点生成一层 radial-gradient()，无需单独的图片文件。

SVG 和 CSS 使用同一组项目数据，但它们只是轻量的网格效果近似。其像素不会与 PNG 预览完全一致。

色板建议

  • 相近色相通常能产生柔和的过渡。
  • 对比色相会让色彩区域的边界更加明显。
  • 随机色板适合作为起点，但不能保证文字可读性。
  • 请检查最终背景上文字、图标和控件的对比度。

放置控制点

直接拖动预览中的编号控制点，也可以聚焦该点并使用方向键。按住 Shift 可一次移动五个百分点。水平和垂直输入框还能用于精确定位。

控制点可以到达画布边缘。将多个点靠近会让颜色集中在一个区域；拉开距离则会给每种颜色更多空间。

常见用途

  • 首屏背景和分区装饰。
  • 社交媒体卡片和视频缩略图。
  • 演示文稿与插画背景。
  • 启动画面和装饰面板。

PNG 与预览最为接近。需要清晰缩放时使用 SVG；希望背景可编辑且不使用单独图片时使用 CSS。

隐私与浏览器存储

颜色、位置和分辨率只保留在浏览器内存与 sessionStorage 中，不会加入漏斗 URL 或服务器状态。工具可以记录发生过导出操作，但不会包含任何项目数值。

当前标签页保持打开时，项目可从 sessionStorage 恢复最多六小时。关闭标签页通常会更早删除数据，因此请及时下载或复制需要保存的内容。

常见问题

它们使用不同的渲染方式。PNG 按距离混合像素，SVG 和 CSS 则叠加径向渐变。颜色和位置相同，但像素并不完全一致。

可以。拖动控制点、使用位置输入框，或聚焦控制点后按方向键。按住 Shift 可增大每次移动的距离。

编辑器以六位 HEX 值保存颜色。请使用取色器，或先将 RGB、HSL 转换为 HEX。

不是。复制的 CSS 通过叠加标准径向渐变来近似该效果。

项目可在当前标签页从 sessionStorage 恢复最多六小时。关闭标签页通常会更早删除数据。项目不会发送到我们的服务器，也不会加入漏斗 URL。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片和链接。

随机颜色生成器

生成 1 到 50 个随机 HEX 颜色，查看色块，复制代码，并用于 CSS、测试或配色探索。