🌈 高级 CSS 渐变生成器

关于 CSS 渐变生成器

这个工具可以可视化构建 CSS 渐变。选择线性、径向或圆锥渐变，添加任意数量的色标，设置位置和角度，并将生成的 CSS 直接复制到你的项目中。所有编辑都会实时更新。

渐变类型

• 线性——颜色沿所选角度的直线渐变。
• 径向——颜色从中心向外辐射。
• 圆锥——颜色围绕中心点像饼图一样扫过。

使用方法

1. 选择渐变类型。
2. 线性渐变可拖动角度滑块旋转方向。
3. 点击色标的颜色框更改颜色，拖动位置滑块移动色标。
4. 点击添加色标增加颜色，或点击色标右侧的 × 删除。
5. 点击复制 CSS复制生成的 background 声明。

常见问题

输出什么 CSS？ 单条 background: ...gradient(...); 声明，可直接粘贴到任意样式表或行内样式。

色标会排序吗？ 会，生成前会按位置排序，确保渐变始终干净渲染。

支持透明度吗？ 可使用十六进制颜色；如需完整 alpha 控制，可编辑粘贴的 CSS 改用 rgba()。