渐变生成器

CSS 线性/径向/锥形渐变，支持色标、预览和可复制代码

构建 CSS 渐变 (线性、径向、锥形)，可自定义色标和角度。实时预览随每个色标调整更新；生成的 CSS 可直接复制到样式表中。

Linear

Radial

Conic

角度 (deg)

色标

位置 (%)

预设库

预览

CSS

background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

使用方法

Choose the gradient type: linear, radial, or conic.
Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
The preview pane updates live as you edit.
Copy the generated CSS background value straight into your stylesheet.

示例

Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.