设计

渐变生成器

在浏览器里可视化调整 CSS 渐变。支持 linear、radial、conic，以及对应的 repeating 变体，可以在同一个面板中编辑类型、角度、形状、中心点、颜色停靠点和不透明度，并实时预览效果。适合制作首页首屏背景、按钮和卡片高光、暗色模式层次、营销横幅，以及设计系统中的品牌色过渡。所有输出都是可直接复制的 CSS，颜色和预设不会上传，渲染过程完全在本地完成。

  • 用可视化控件调整渐变类型、角度、形状、中心点和颜色停靠点，并实时查看效果
  • 内置丰富预设，覆盖品牌色、暗色模式、玻璃质感、霓虹效果和装饰性重复纹理
  • 输出可直接复制的 CSS，也可按需加入 fallback 背景色，兼容旧浏览器和受限环境
  • 每个颜色停靠点都支持 alpha 和独立位置设置，从双色过渡到多层背景都能处理
  • 编辑过程完全在浏览器本地完成，适合处理未发布的品牌视觉和保密设计稿
工具/渐变生成器
2 个停靠点
135deg
不透明度100%
不透明度100%
带 fallback 的输出
background: #6366f1;
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
快捷操作

功能简介

把渐变需要调的关键参数集中在一个面板里，不用在取色器、代码编辑器和预览窗口之间来回切换。调到满意后，直接复制 CSS 回到项目里使用。

  1. 01

    同一面板支持 6 种渐变

    linear、radial、conic 以及对应的 repeating 变体都在同一个控制面板里。切换样式后，也可以沿用相近的参数思路继续调整。

  2. 02

    精细控制颜色停靠点

    每个停靠点都可以设置 HEX 颜色、百分比位置和不透明度，从简单的双色混合到多停靠点的层次背景都能自然扩展。

  3. 03

    角度和中心点一起调整

    线性和锥形渐变支持角度滑块和常用角度快捷选择；径向和锥形渐变还可以调整中心点，让视觉焦点更贴合页面布局。

  4. 04

    丰富的起始预设

    内置 70 多个精选预设，覆盖品牌色、暗色主题、玻璃质感、霓虹、柔和粉彩和重复纹理，选中后即可继续微调。

  5. 05

    考虑兼容性的 CSS 输出

    可以选择先输出一个纯色 background 声明，让旧浏览器、邮件客户端或 PDF 导出环境也能显示一个合理的背景色。

  6. 06

    支持透明度的实时预览

    预览区背后带有棋盘格，半透明停靠点的透出效果更容易判断，也更方便在放到真实背景前做确认。

如何使用

从想法到可用于生产的 CSS，都可以在一个面板中完成。无论是快速试效果，还是在设计稿和样式代码之间反复打磨，都很顺手。

  1. 01

    先选择渐变类型。首屏背景通常可以从 linear 开始，柔和光晕更适合从 radial 开始。

  2. 02

    调整角度、形状或中心点，让视觉焦点和页面布局、阅读动线保持一致。

  3. 03

    依次编辑每个颜色停靠点的颜色、位置和不透明度，并根据设计变化添加或删除停靠点。

  4. 04

    查看预览，包括半透明区域，确认上方的文字和图标仍然足够清晰。

  5. 05

    如果需要更好的兼容性，开启 fallback 背景色，然后把 CSS 复制到样式表、组件或主题 token 中。

功能说明

渐变从落地页首屏到细微的组件状态都会用到。它不仅要好看，也要能在设计和工程、浅色和深色主题、以及对可访问性敏感的界面之间稳定复现。

  • 支持完整的 CSS 渐变家族：linear-gradient、radial-gradient、conic-gradient，以及对应的 repeating 变体
  • 精确的百分比位置和 0 到 100 的 alpha 值，方便复现设计文件里的细腻过渡
  • 线性和锥形渐变提供常用角度快捷选择，不必反复输入 45、90、135 等关键角度
  • 径向和锥形渐变支持中心点控制，方便把视觉焦点对齐到周围布局
  • 预设会按渐变类型筛选，切换样式后只展示相关选项
  • 随机生成可以在确定渐变类型和方向后，快速探索新的配色组合
  • fallback 输出适合无障碍降级、邮件模板、PDF 和其他受限渲染环境
  • 预览区下方的棋盘格让半透明渐变更容易检查
  • 所有计算都在浏览器内完成，未发布的品牌视觉和内部素材不会离开本地
  • 输出是干净的 CSS，可用于 Tailwind 任意值、CSS 变量、Sass mixin 和组件库
  • 可与颜色转换、对比度检查、调色板生成搭配，形成完整的颜色工作流

适合哪些场景

调得好的渐变，往往会决定产品给人的第一印象。同一套视觉语言也需要能从首屏背景延伸到组件状态，再扩展到活动素材。

  1. 营销站首屏背景

    低饱和度的多停靠点渐变可以保留品牌识别度，同时不影响标题、副标题和按钮的可读性。

  2. 按钮和交互状态

    primary、hover、active、selected 等状态如果来自同一套渐变模板，组件的层次和反馈会更统一。

  3. 卡片与信息分组

    在卡片、数据面板和状态区域上使用轻微渐变，可以比纯色块更自然地形成分组，又不会抢内容的注意力。

  4. 暗色模式层次

    在暗色主题中，低亮度的多停靠点渐变可以替代纯黑，让界面更有呼吸感，也减少视觉重量。

  5. 活动和季节主题

    活动页和季节横幅常常需要有表现力但又可控的色彩能量。预设加随机生成，可以在短时间内找到方向。

  6. 品牌系统与设计 token

    稳定的渐变可以沉淀成 CSS 变量或设计 token，让不同产品表面共享同一套品牌语言，而不用每次重新实现。

  7. 仪表盘和图表容器

    在图表容器和 KPI 卡片上使用轻量渐变，可以增强信息分组和可读性，同时不抢走数据本身的注意力。

  8. 邮件模板和导出素材

    对邮件、PDF 和海报等场景，带 fallback 的输出可以让受限渲染器显示合理的纯色背景，同时在支持的环境中继续使用渐变。

  9. 原型和高保真演示

    探索阶段可以用预设快速搭出可信的视觉方向，方向确认后再把参数升级为正式设计 token。

  10. 登录页、空状态和错误页

    这些页面通常留白多、视觉锚点少。克制的渐变可以为页面增加氛围，又不会压过表单、提示信息或行动按钮。

延伸阅读

如果渐变来自现有品牌色或 token 值，建议先用 颜色转换器 规范化每个停靠点，再微调过渡效果。当渐变下方承载标题、按钮文字或徽标时，发布前请把真实的前景色和背景组合放到 对比度检查 中检查，确保它不只是好看，也足够可读。

使用建议

渐变看起来是视觉问题，但要在生产环境里长期稳定使用，需要同时考虑可读性、性能、主题适配和可维护性。

  • 任何承载文字的区域，都要确保对比度足够。渐变应该服务内容，而不是和内容抢注意力。
  • 大多数 UI 场景用 2 到 4 个停靠点就够了。停靠点太多容易产生色带、噪点，也会增加维护成本。
  • 暗色模式下要降低饱和度或不透明度，避免过亮的色带压过前景内容。
  • 用于交互表面时，要保留足够的颜色变化空间，让 hover、active、disabled 状态能从同一套渐变延展出来。
  • 最终确定的渐变建议提升为 CSS 变量或设计 token，不要把完整字符串重复粘贴到多个组件里。
  • 径向和锥形渐变的中心点需要在常见断点下验证，避免移动端出现视觉焦点漂移。
  • 无障碍降级场景可以使用 fallback 背景色，同时仍要检查在忽略渐变的环境下内容是否可读。
  • 团队协作时，把渐变方向和停靠点位置记录到设计系统里，避免口头交接造成数值漂移。

边界与注意事项

最终渲染效果会受到浏览器、显示器和周围 CSS 的影响。即使语法标准一致，也不能保证视觉观感完全相同。

  • 不同浏览器在色彩管理、抗锯齿和亚像素渲染上会有差异，复杂渐变可能出现轻微不同。
  • 高频重复渐变和多停靠点大面积图层会增加绘制成本，尤其是在低端设备和全屏尺寸下。
  • 这个工具专注于 CSS 视觉效果，不包含图片压缩、位图导出或色彩配置文件管理。
  • 为浅色模式调好的渐变，通常还需要单独为暗色模式复查，而不是默认复用。
  • 如果项目要求 token 化样式，请把输出映射到已批准的 token 名称，而不是直接粘贴字面 CSS 字符串。
  • 在对可访问性敏感的界面中，请使用专门的对比度工具验证前景色和背景组合。
  • 用于印刷或大幅输出时，油墨、纸张和工艺会改变最终观感，仍需要看实际打样。

常见问题

这些是在前端实现和设计协作中使用渐变时，围绕用法、兼容性、数据处理和实际限制最常见的问题。

生成的 CSS 可以直接用于生产吗？

可以。输出遵循标准 CSS 渐变语法，可以直接放进样式表、组件样式、Tailwind 任意值或 CSS 变量中。

什么时候应该启用 fallback 背景色？

当目标环境可能是旧浏览器、邮件客户端、PDF 导出，或不一定支持对应语法时建议开启。它会先输出一个纯色 background 声明，再叠加渐变。

repeating 渐变适合用在哪里？

适合制作条纹、环形纹理和装饰性扫光，可以用可响应缩放的 CSS 表达替代位图素材。

颜色停靠点是不是越多越好？

不是。大多数 UI 场景用 2 到 4 个停靠点就足够了。过多停靠点会带来色带、噪点和更高的维护成本。

编辑时我的颜色会被上传吗？

不会。渲染、预览和导出都在浏览器本地完成，适合处理未发布的品牌视觉和保密设计稿。

怎样让同一个渐变在多个页面保持一致？

建议把最终 CSS 提升为共享变量或设计 token，并在复用组件中引用它，而不是在多个文件里重复粘贴完整字符串。

可以和 Tailwind 一起用吗？

可以。输出可以放进 Tailwind 的任意值写法，也可以注册到 tailwind.config 的 backgroundImage 或 theme 扩展里。

为什么预览和设计文件看起来有一点差异？

通常是因为色彩配置文件、显示器色域、亮度校准，或最终页面上叠加的其他样式不同。重要场景建议在目标设备上确认。

随机生成会丢掉当前设置吗？

它通常会保留渐变类型和方向，只替换颜色停靠点。如果当前结果很重要，建议先复制 CSS 做备份，再尝试随机组合。

浅色模式和暗色模式可以复用同一个渐变吗？

可以，但通常值得为暗色模式单独调一个版本，因为同样的颜色在不同背景亮度下观感会明显变化。

径向或锥形渐变的中心点应该放在哪里？

取决于布局。如果想要偏移的视觉焦点，可以在对应轴上试试 30% 到 40%。如果想要更柔和的中心光晕，保持在 50% 附近更稳妥。

渐变会影响页面性能吗？

简单的 2 到 3 个停靠点渐变通常很轻量。大面积、多停靠点的 repeating 渐变可能在低端设备或滚动区域增加合成成本，必要时可以考虑截图化或限制使用范围。

更多相关工具

渐变只是更大颜色工作流中的一步。可以继续结合颜色转换、调色板生成和对比度检查，从规范化颜色值到色阶扩展、无障碍验证，再到最终 UI 落地形成完整流程。