CSS 渐变生成器
快速为网页创建渐变背景(linear-gradient),提供实时预览和可直接复制的 CSS 代码 —— 无需打开 Figma 或 Photoshop。
工作原理
CSS 线性渐变(linear-gradient)可以创建视觉效果丰富的背景 —— 横幅、按钮、区块背景 —— 无需图片或外部设计工具。选择两种颜色和一个角度,实时查看预览,然后直接将生成的 background 属性复制到您的样式表中。这是在样式指南中进一步完善之前,快速原型化渐变背景的最快方法。
我可以在一个渐变中使用两种以上的颜色吗?
CSS 原生支持这一点(例如 linear-gradient(90deg, #fff, #f00, #00f)),但此工具有意专注于双色渐变,这是区块或按钮背景最常见的用例。对于更复杂的渐变,您可以复制这里生成的结果,然后直接在您的 CSS 中添加额外的颜色停止点。
渐变的角度代表什么?
角度决定了渐变延伸的方向:0° 从下到上,90° 从左到右,180° 从上到下,依此类推。这与 CSS 函数 linear-gradient() 原生使用的约定相同,因此这里复制的代码生成的效果与预览中看到的完全一致。
100% 本地处理:CSS 代码的生成直接通过 WebAssembly 在您的浏览器中完成,不涉及任何外部服务器调用。