# CSS 渐变生成器 - 在线可视化制作线性/径向/锥形渐变，导出 CSS 与 PNG

> 免费在线 CSS 渐变生成器：可视化制作 linear、radial、conic 渐变，拖动色标、旋转角度、调透明度，内置预设，一键复制 CSS 与 Tailwind 类名，可导出 PNG。

- 网址: https://qilingtools.com/zh/css-gradient
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [设计配色](https://qilingtools.com/zh/tags/design), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

做网页背景、按钮、卡片或海报时经常需要一段好看的渐变。这个工具把 CSS 渐变变成可视化操作：在色条上点击即可添加色标，拖动调整位置，选中后修改颜色和不透明度，按 Delete 删除；线性渐变用角度盘拖动设置方向（按住 Shift 以 15° 吸附），径向渐变可选椭圆或正圆并调整中心点，锥形渐变可设起始角度，还支持 repeating 重复渐变。预览区带透明棋盘格，半透明色标一目了然。右侧预设库提供海洋、日落、极光、彩虹、色轮等常用渐变，点一下即可在此基础上修改，也可以一键随机配色。生成的 CSS 带一行纯色兜底，Tailwind 用户可以直接复制 bg-[linear-gradient(...)] 任意值类名。需要图片时，可按 1920×1080、手机壁纸、正方形、OG 分享图等尺寸导出 PNG，导出的画面与 CSS 效果一致。

## 使用步骤

1. 选择线性、径向或锥形渐变，或从预设中挑一个
2. 在色条上添加、拖动色标，调整颜色、透明度和角度
3. 复制 CSS / Tailwind 代码，或设置尺寸导出 PNG

## 功能特点

- 线性、径向、锥形三种渐变及 repeating 重复渐变
- 色条上拖动色标，支持透明度
- 角度盘拖动调方向，Shift 吸附 15°
- 径向/锥形可调中心位置与形状
- 渐变预设库与随机配色
- 输出 CSS（含兜底色）与 Tailwind 任意值类名
- 导出任意尺寸 PNG 渐变图

## 常见问题

### 生成的 CSS 渐变兼容哪些浏览器？

linear-gradient 和 radial-gradient 在所有现代浏览器中都无需前缀，conic-gradient 需要 Chrome 69+、Safari 12.1+、Firefox 83+。工具输出的第一行 background 纯色是给极旧浏览器的兜底，它取所有色标的平均色。

### 怎么在 Tailwind CSS 里使用？

复制“Tailwind 任意值”里的类名，例如 bg-[linear-gradient(90deg,#f97316_0%,#8b5cf6_100%)]，直接写在 class 里即可，空格已按 Tailwind 规则替换成下划线，Tailwind v3 和 v4 都支持。

### 导出的 PNG 和网页上的效果一样吗？

一样。导出时按 CSS 规范在 Canvas 上重新绘制：线性渐变按角度计算渐变线长度，径向渐变使用默认的 farthest-corner 尺寸，锥形渐变从指定角度开始，所以任何宽高比下都与 CSS 预览一致。repeating 重复渐变目前只影响 CSS 输出。

### 色标可以设置透明吗？

可以。选中色标后拖动“不透明度”滑块，输出会自动变成 rgba() 颜色，预览区的棋盘格能看出透明效果，导出 PNG 时也会保留透明通道，适合做叠加在图片上的渐变遮罩。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：支持中文 UTF-8、URL 安全变体，文本与 Base64 互转，实时转换，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：encodeURIComponent 与 encodeURI 两种模式，处理中文、空格与特殊符号，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 JWT 的 Header 与 Payload，展示过期时间、签发时间等，本地解析不上传，保护令牌安全。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希/摘要计算工具：对文本或文件计算 SHA-1、SHA-256、SHA-384、SHA-512，使用浏览器加密接口本地完成，文件不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：使用加密安全随机数批量生成符合 RFC 4122 的 UUID v4，可大写、去连字符、加花括号，一键复制。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，支持大整数（BigInt），本地实时计算。