CSS 渐变生成器

渐变生成器简介

生成线性或径向 CSS 渐变，可设置多个色标、角度与起止位置，并实时预览与复制 CSS 代码。适用于背景、按钮、卡片等 UI 的渐变样式。

本工具支持双色或多色渐变、角度与方向调节，输出标准 CSS linear-gradient / radial-gradient 语法，便于直接用于项目或设计稿。

使用说明

选择渐变类型

选择线性（linear）或径向（radial）渐变。线性可设置角度或方向（如 to right、to bottom）；径向可设置圆心与形状。

添加与调节色标

添加多个色标并指定颜色与位置（百分比或长度）。拖拽色标可调整位置；点击色标可修改颜色或删除。预览区实时显示效果。

复制 CSS

确认效果后点击「复制 CSS」获取 linear-gradient(...) 或 radial-gradient(...) 代码，粘贴到样式表或内联样式中使用。

常见问题

Q: 支持 conic-gradient 吗？

以工具支持为准；若仅支持 linear 与 radial，圆锥渐变需手写或使用其他工具。现代浏览器已广泛支持 conic-gradient。

Q: 色标位置用百分比还是像素？

两种均可；百分比便于响应式，像素便于固定尺寸。工具通常支持百分比，复制出的 CSS 可直接在样式中再改单位。

Q: 生成的代码兼容哪些浏览器？

输出为标准 CSS Gradient 语法，现代浏览器（Chrome、Firefox、Safari、Edge）均支持；如需兼容老版本 IE，需单独处理或提供回退色。