CSS渐变生成器
background: linear-gradient(135deg, #126fff, #17b982);CSS渐变生成器
生成线性渐变 CSS 并实时预览
浏览器本地处理输入和文件不上传到本站服务器数据处理说明
使用说明
生成可复制的 CSS 渐变
做按钮、背景、卡片或视觉稿配色时使用。
1选择渐变颜色
2调整方向和过渡
3复制 CSS 代码
完成后得到可直接放进样式表的渐变代码。先选择渐变颜色
这个工具解决了你的问题吗？完成操作后告诉我们，反馈会用于改进工具。
从方向和两个色点开始调渐变
生成可复制的 CSS 线性渐变。选择起止颜色和角度后，把代码放到目标元素背景上，再检查内容的可读性。
可核对的例子
输入与设置
135deg; #126fff; #17b982预期结果
linear-gradient(135deg, #126fff, #17b982)复制结果作为 background 或 background-image 的值。角度变化会改变过渡方向；元素宽高也会影响你看到的分布。
适用范围与注意事项
- 渐变上方放文字时，需要检查不同位置的对比度，不只检查起点或终点。
- 输出是 CSS 声明值，不是图片文件；邮件客户端和旧环境的支持情况需要另行确认。
结果与说明不一致？请附上不含隐私的复现步骤。 反馈问题