CSS 渐变生成
可视化生成 CSS linear / radial 渐变并复制代码。
90°
0%
100%
CSS
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
隐私安全全部在浏览器本地完成，数据不上传
简单易用粘贴或输入即可，结果实时呈现
永久免费不限次数，无需注册
快速高效先进技术，处理高效稳定
CSS 渐变容易想象，手写却很烦琐，要顾及色标、角度和正确语法。可视化设置好颜色，即可得到干净的 linear 或 radial 渐变代码，直接粘进你的样式表。
使用步骤: CSS 渐变生成
- 1输入内容选择渐变类型:线性或径向。
- 2设置选项设置每个色标的颜色与位置,可点击添加更多色标。
- 3开始处理线性渐变下调整角度,实时预览渐变效果。
- 4获取结果点击“复制 CSS”取走可直接使用的渐变代码。
常见用途
做一个背景设计一个线性或径向渐变，复制出 CSS。
调整色标拖动色标，控制每个色调落在什么位置。
切换方向为线性渐变设角度，或为径向渐变设中心点。
复用渐变代码复制一次，就能贴到项目各处。
使用提示
线性和径向不同线性渐变沿一条带角度的线展开，径向渐变从一个中心点向外扩散。挑与你想要的形状相符的那一种。
色标控制过渡每个色标放在哪里，决定了一个色调多快变成下一个。色标越近，过渡越锐利。
现在很少需要前缀现代浏览器都支持无前缀的渐变写法，因此旧的厂商前缀通常没必要。只有面向很老的环境时才加。
留意色带平滑渐变在某些屏幕上会出现可见的条带，尤其是长距离、很微妙的过渡。加一点噪点或缩短范围会有帮助。