CSS GRADIENT
CSS gradient generator, what you see is what you get.
Linear, radial and conic gradients with live multi-stop preview. Copy the CSS or export a PNG — everything runs locally in your browser.
Type & angle
Color stops
CSS code
Everything runs locally in your browser
How do I use the gradient generator?
Pick a gradient type (linear, radial or conic) and an angle, then add and drag color stops to tune colors and positions with a live preview. When happy, click “Copy CSS” to paste the code into your project, or “Export PNG” to get a ready-to-use gradient image. Presets like Aurora and Sunset apply with one click.
示例与注意事项Example & notes
一个例子A worked example
调好角度与两端色标，实时预览并复制 background-image 代码；也能导出 1200×630 的 PNG 当分享图。Set the angle and colour stops, preview live, copy the background-image code, or export a 1200×630 PNG for social cards.
注意事项Things to watch
- 加一个中间色标能让渐变更自然，避免出现灰带。Adding a middle stop smooths the transition and avoids grey banding.
- 带透明度的渐变要用 rgba 或 8 位 HEX，注意旧浏览器的回退色。Transparent gradients need rgba or 8-digit HEX, with a fallback colour for old browsers.
- 导出 PNG 尺寸越大文件越大，分享图 1200×630 足够。Bigger exports mean bigger files — 1200×630 is plenty for sharing.
相关问答More Q&A
支持锥形渐变吗？Is conic gradient supported?
支持线性、径向与锥形三种渐变类型切换。Yes — linear, radial and conic are all available.
能直接复制代码吗？Can I copy the code?
可以，代码块右上角有复制按钮，复制的是可直接使用的 CSS。Yes — the copy button gives ready-to-use CSS.