可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
渐变图库
background: linear-gradient(135deg, #10B981 0%, #38BDF8 50%, #111827 100%);
可访问性对比提示
白色文字 的最低色标对比度约 2.14:1。正式发布前仍需在最终背景位置检查文字。
白字最低 2.14:1，深色字最低 1.00:1。
渐变 CSS 是视觉起点。发布前请检查文字对比度、压缩效果、深色模式和平台预览。
CSS 渐变生成器可以可视化创建 linear、radial 和 conic 渐变代码。
它适合快速设计按钮、背景、标签、封面、卡片和原型样式。
清晰输入
准备好要处理的渐变类型、颜色、角度和输出格式，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
选择绿色到蓝色并设置 linear 135deg，或使用 radial spotlight 预设生成卡片背景。
假设
用户需要的是 CSS 背景渐变，而不是图片渐变素材。
限制
大面积渐变可能影响文字可读性，对比度提示不能替代最终 UI 审查。
先确定背景用途
按钮、横幅、封面和页面背景对渐变复杂度要求不同，正文背景要优先保证可读性。
限制颜色数量
两到三个颜色停靠点通常更稳，过多颜色容易显得杂乱，也更难和文字搭配。
区分渐变类型
linear 适合方向背景，radial 适合聚光卡片，conic 更适合徽章、圆环和装饰扫光。
检查截图和压缩效果
渐变在 JPG 压缩、视频封面和社交图里可能出现色带，发布前要看真实导出效果。
适合封面和强调区
渐变适合 OG 图、社交卡片、按钮强调和 section 背景，但不适合承载大量正文。
注意文字覆盖
如果要在渐变上放标题或按钮，先确定最浅和最深区域都能看清文字。
输出格式按团队选择
普通项目复制 CSS 声明，设计 token 可用 CSS 变量，Tailwind 原型可用任意值类。
品牌感来自克制
统一角度、颜色数量和明暗范围，比每个区块都使用不同渐变更稳定。
按钮背景
生成强调按钮样式。
区块背景
创建轻量页面背景。
卡片聚光
用 radial 渐变做柔和强调。
徽章圆环
用 conic 渐变做扫光装饰。
支持 radial 和 conic 吗？
支持。页面可在 linear、radial 和 conic 三种渐变模式之间切换。
生成的是图片吗？
不是，生成的是 CSS 渐变代码。
可以复制 Tailwind 类吗？
可以，页面提供 Tailwind 任意值类输出。
文字放在渐变上要注意什么？
需要检查对比度和可读性，尤其是最终裁切位置。
渐变适合放正文背景吗？
通常不建议大段正文直接放在复杂渐变上。若必须使用，应提高遮罩或背景对比，确保文字可读。
radial 和 conic 渐变适合什么？
radial 适合聚光、卡片和背景层次；conic 适合圆环、徽章、头像边框和装饰扫光。
为什么导出的渐变图会出现色带？
低质量压缩、颜色过渡范围太大或显示设备限制都可能造成色带，发布前要看真实导出效果。
支持 radial 和 conic 吗？
支持。页面可在 linear、radial 和 conic 三种渐变模式之间切换。
生成的是图片吗？
不是，生成的是 CSS 渐变代码。
可以复制 Tailwind 类吗？
可以，页面提供 Tailwind 任意值类输出。
文字放在渐变上要注意什么？
需要检查对比度和可读性，尤其是最终裁切位置。
渐变适合放正文背景吗？
通常不建议大段正文直接放在复杂渐变上。若必须使用，应提高遮罩或背景对比，确保文字可读。
radial 和 conic 渐变适合什么？
radial 适合聚光、卡片和背景层次；conic 适合圆环、徽章、头像边框和装饰扫光。
为什么导出的渐变图会出现色带？
低质量压缩、颜色过渡范围太大或显示设备限制都可能造成色带，发布前要看真实导出效果。
推荐流程
配色生成流程
先生成调色板，再创建渐变并检查对比。