渐变生成器
UpBox优盒工具箱，免费在线 CSS 渐变生成器，可视化调整两到三个色标、角度与线性径向类型，实时预览并一键复制 background 代码。
无需注册 · 数据不上传No sign-up · nothing uploaded
实时预览Live preview
拖动颜色或角度即可实时预览
渐变参数Settings
颜色以 HEX 输出，径向渐变固定圆心在 50% 50%；预览与代码完全一致
本工具所有运算在本地浏览器完成，你的文件、文本不会上传到服务器
工具介绍
写渐变最烦的是改一个色号就要刷新一次。这里颜色、角度、类型都在同一屏里调，上面的预览跟着变，下面的代码同步更新，满意了直接复制。 The annoying part of writing gradients is refreshing for every colour tweak. Here colour, angle and type sit on one screen: the preview updates, the code follows, and you copy it when it looks right.
默认两个色标就够用，需要更丰富的过渡时勾上中间色，位置固定落在 50%。预设里给了几组常用配色，选中后仍可继续微调。 Two stops cover most cases; tick the middle one for a richer transition, fixed at 50%. A few presets give you a starting palette that stays editable after selection.
- 实时预览Live preview
- 2–3 个色标Two or three stops
- 角度可调Adjustable angle
- 线性 / 径向Linear or radial
- CSS 一键复制One-click CSS
使用说明
- 选择线性或径向。Pick linear or radial.
- 调整色标与角度。Adjust stops and angle.
- 需要时勾选中间色。Enable the middle stop if needed.
- 复制生成的 CSS。Copy the generated CSS.
常见问题
生成的代码能直接用吗？Is the output ready to use?
能，格式是 background 属性，粘贴到样式表里即可；角度按 CSS 规范顺时针计算。Yes — it is a background declaration you can paste into a stylesheet, with the angle following the CSS clockwise convention.
中间色位置能改吗？Can I move the middle stop?
固定 50%，不接受自定义位置，改位置请直接编辑输出代码。It is fixed at 50%; edit the emitted code if you need another position.
径向渐变的圆心在哪？Where is the radial centre?
固定在正中央 50% 50%，暂不支持偏移圆心与椭圆比例。Fixed at 50% 50%; offset centres and ellipse ratios are not supported.
支持透明度吗？Does it support transparency?
不支持，颜色只用 6 位 HEX 输出；需要透明请把 HEX 换成带 alpha 的写法。No — colours are emitted as six-digit HEX; swap in an alpha form in your own code.