CSS 渐变生成器

此 CSS 渐变生成器根据您控制的颜色停止构建线性和径向渐变，并具有实时预览和可立即粘贴的背景声明。沿着栏拖动停止点，设置角度或形状，CSS 就会立即更新。

一切都根据您选择的颜色和设置在浏览器中运行，因此不会上传任何内容，您可以复制结果并离线使用。

线性渐变沿直线混合颜色，角度设置其方向：0 度指向上方，90 度指向右侧，180 度指向下方。径向渐变从中心向外混合，形成圆形或椭圆形。

两者都是标准 CSS 值，写为 Linear-gradient() 和 Radial-gradient()，并且都使用相同的色标列表，因此切换类型会保留颜色，只会改变它们的传播方式。

每个色标是放置在 0% 到 100% 位置的颜色。相邻停止点之间的渐变会平滑地混合，因此停止点的位置控制其颜色峰值的位置以及淡入下一停止点的速度。

根据需要添加任意多个停止点以构建多颜色渐变，拖动它们以微调混合，或单击栏以将新停止点放置在您想要的位置。梯度至少需要两站。

复制生成的代码并将其粘贴为任何元素（例如部分、卡片或按钮）的背景。现代浏览器支持线性渐变和径向渐变，无需供应商前缀，因此该值按原样工作。

因为渐变只是一个值，所以您还可以在任何需要背景图像的地方使用它，将其分层在纯色上作为后备，或者在线性和径向版本中重复使用相同的停止点以获得一致的外观。