仅浏览器已上线开发者工具
CSS 渐变生成器
可视化设计 CSS 渐变并复制代码。
隐私说明。 在您的浏览器中运行:您输入的内容保留在此页面上,不会发送到服务器。
推荐的后续步骤
相关工具
常见问题
它会输出一条可直接粘贴的 background 声明,使用标准的 linear-gradient() 或 radial-gradient() 函数,例如 background: linear-gradient(90deg, #1a6741 0%, #7ed957 100%);。将其直接复制到样式表或内联 style 属性中即可。
使用「添加色标」按钮插入更多色标,然后设置每个色标的颜色及其从 0% 到 100% 的位置。工具会自动按位置对色标排序,因此您可以任意顺序添加,生成的 CSS 仍保持一致。
角度决定颜色过渡的方向。0deg 使渐变朝上,90deg 朝右,180deg 朝下。拖动角度滑块即可旋转渐变,并实时查看预览的更新。
不会。渐变完全在您的浏览器中用纯 CSS 构建:没有上传、无需账户,任何内容都不会离开此页面。页面加载后即可离线使用。
最后更新:2026-06-23。