▧
CSS 渐变生成
可视化调配线性/径向渐变,实时预览并复制 CSS 代码,前端与设计常用。
本地处理 · 不上传
加载工具中…
相关：CSS渐变 · 渐变生成器 · linear-gradient · 背景渐变
CSS 渐变生成器能可视化调节颜色、角度和色标，实时生成线性/径向渐变的 CSS 代码，复制即用。生成在本地完成。
使用步骤
- 添加或调整渐变的颜色与位置
- 选择线性或径向、设置角度
- 实时预览渐变效果
- 复制生成的 CSS 代码
使用场景
- 为网页背景、按钮设计漂亮的渐变
- 快速试验配色、找灵感
- 把设计稿的渐变还原成 CSS
小贴士
- 线性渐变用角度控制方向，径向从中心扩散
- 多个色标可做出丰富过渡
- 加一点同色系深浅比纯色更有质感
常见问题
生成的代码怎么用？
把复制的 background 属性粘到你的 CSS 里对应元素上即可，现代浏览器都支持。
线性和径向渐变有什么区别？
线性沿某个角度直线过渡；径向从一个中心点向外辐射过渡。按视觉需求选择。
支持透明度吗？
支持，颜色可用 rgba 或带透明度的色值，做出淡入淡出的效果。
CSS 渐变生成是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 渐变生成，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。