🌈 渐变图片生成器（线性 / 径向 / 角向，导出图片和 CSS）Generate Gradient Image (Linear, Radial, Conic + CSS)

使用说明与常见问题How-to & FAQ

「渐变图片生成器（线性 / 径向 / 角向，导出图片和 CSS）」是什么？What is the Generate Gradient Image (Linear, Radial, Conic + CSS) tool?

生成任意尺寸的渐变背景图：线性、径向（圆形）或角向（圆锥）渐变，最多 8 个颜色节点，可调角度和每个颜色的位置，内置日落、海洋、彩虹、色环等预设；实时预览，导出 PNG、JPG 或 WebP（最大 8000×8000），同时给出效果完全一致的 CSS 代码。适合做壁纸、网页背景、封面和占位图，在浏览器本地生成。Make a gradient background image at any size: linear, radial (circular) or conic gradients with up to 8 colour stops, an adjustable angle and stop positions, plus presets such as sunset, ocean, rainbow and colour wheel. Preview live, export PNG, JPG or WebP (up to 8000×8000), and copy matching CSS code. Great for wallpapers, web backgrounds, covers and placeholders. Everything is generated locally in your browser.

如何使用「渐变图片生成器（线性 / 径向 / 角向，导出图片和 CSS）」？How do I use the Generate Gradient Image (Linear, Radial, Conic + CSS) tool?

在「渐变图片生成器（线性 / 径向 / 角向，导出图片和 CSS）」中，按需设置「宽度」、「高度」、「类型」、「角度」、「预设」等选项，然后点击「+ 添加颜色」、「⇄ 反转方向」、「复制 CSS」、「下载图片」按钮即可。In the Generate Gradient Image (Linear, Radial, Conic + CSS): Set "Width", "Height", "Type", "Angle", "Preset", then click "+ Add colour", "⇄ Reverse", "Copy CSS", "Download image".

三种渐变有什么区别？角度怎么理解？What are the three gradient types, and how does the angle work?

线性渐变沿一条直线过渡，角度与 CSS 相同：0° 从下到上、90° 从左到右、180° 从上到下；径向渐变从中心向四周呈圆形扩散，最后一个颜色正好到达四个角；角向（圆锥）渐变绕中心旋转一圈，角度是起始方向（0° 指向正上方，顺时针），首尾用同一种颜色可做出无缝色环。A linear gradient changes along a straight line, with the angle working as in CSS: 0° goes bottom to top, 90° left to right and 180° top to bottom. A radial gradient spreads out from the centre in a circle, with the last colour reaching the corners. A conic gradient sweeps once around the centre; the angle is where it starts (0° points straight up, going clockwise), and using the same colour at both ends gives a seamless colour wheel.

颜色位置是什么意思？What does a colour's position mean?

位置表示这个颜色在渐变中所处的百分比，0% 是起点，100% 是终点，节点之间平滑过渡；两个颜色设成相同位置会形成硬分界（条纹效果）。节点顺序无所谓，会按位置自动排序；“反转方向”会把所有位置镜像（p → 100 − p）。最多 8 个颜色。The position is where that colour sits along the gradient, from 0% (start) to 100% (end), with smooth blends in between. Giving two colours the same position makes a hard edge (a stripe). The order you enter them in doesn't matter, because stops are sorted by position. Reverse mirrors every position (p → 100 − p). Up to 8 colours are allowed.

CSS 代码和图片效果一样吗？Does the CSS match the image?

一样：图片按 CSS 规范的几何方式绘制（线性渐变的长度按角度覆盖整个矩形，径向用 circle farthest-corner），复制 CSS 直接用作 background 即可得到相同效果；CSS 渐变可随元素缩放而不失真，图片适合需要固定文件的场合（壁纸、封面、邮件等）。Yes. The image is drawn with the same geometry as the CSS spec: the linear gradient's length covers the whole rectangle at that angle, and the radial one uses circle farthest-corner. Paste the CSS as a background to get the same look. A CSS gradient scales cleanly with its element, while the image suits places that need an actual file, such as wallpapers, covers and emails.

可以导出多大？会上传吗？How large can I export? Is anything uploaded?

每边最多 8000 像素、总共最多 4000 万像素，预览会按比例缩小显示，下载的是完整尺寸。PNG 无损（渐变推荐），JPG 和 WebP 体积更小。全部在浏览器本地生成，不上传任何内容。Up to 8,000 px per side and 40 megapixels in total. The preview is scaled down, but the download is full size. PNG is lossless and best for gradients; JPG and WebP are smaller. Everything is generated locally in your browser and nothing is uploaded.

「渐变图片生成器（线性 / 径向 / 角向，导出图片和 CSS）」免费吗？需要注册吗？Is the Generate Gradient Image (Linear, Radial, Conic + CSS) free? Do I need an account?

「渐变图片生成器（线性 / 径向 / 角向，导出图片和 CSS）」完全免费，无需注册或安装，打开网页即可使用，手机和电脑都能用；输入的内容只在你的浏览器本地处理。The Generate Gradient Image (Linear, Radial, Conic + CSS) is completely free with no sign-up or install and works on phones and desktops; what you enter is processed only in your browser.