CSS GRADIENT
CSS 渐变生成器，所见即所得。
线性 / 径向 / 锥形渐变，多色标实时预览，一键复制 CSS 代码，也能直接导出 PNG。全部在浏览器本地完成。
类型与角度
色标
CSS 代码
本页处理在浏览器本地完成
怎么用渐变生成器？
选择渐变类型（线性 / 径向 / 锥形）与角度，添加并拖动色标调整颜色与位置，右侧实时预览。满意后点击「复制 CSS」即可把代码贴进自己的项目；也能点「导出 PNG」得到一张可直接使用的渐变图。另有极光、日落等预设可一键套用。
示例与注意事项Example & notes
一个例子A worked example
调好角度与两端色标，实时预览并复制 background-image 代码；也能导出 1200×630 的 PNG 当分享图。Set the angle and colour stops, preview live, copy the background-image code, or export a 1200×630 PNG for social cards.
注意事项Things to watch
- 加一个中间色标能让渐变更自然，避免出现灰带。Adding a middle stop smooths the transition and avoids grey banding.
- 带透明度的渐变要用 rgba 或 8 位 HEX，注意旧浏览器的回退色。Transparent gradients need rgba or 8-digit HEX, with a fallback colour for old browsers.
- 导出 PNG 尺寸越大文件越大，分享图 1200×630 足够。Bigger exports mean bigger files — 1200×630 is plenty for sharing.
相关问答More Q&A
支持锥形渐变吗？Is conic gradient supported?
支持线性、径向与锥形三种渐变类型切换。Yes — linear, radial and conic are all available.
能直接复制代码吗？Can I copy the code?
可以，代码块右上角有复制按钮，复制的是可直接使用的 CSS。Yes — the copy button gives ready-to-use CSS.