CSS渐变生成器
在浏览器内生成linear-gradient()或radial-gradient()，支持2–6个可增删色标、角度或径向形状、实时预览、复制与重置。
使用步骤
如何使用
- Choose a linear or radial gradient.
- Adjust each color and its 0–100% position, then add stops when needed.
- Inspect the live preview and copy the CSS background declaration.
Ordered color stops
Stops are sorted from 0% through 100% every time you adjust a position. If two stops share a position, their current order is retained, which creates a deliberate hard edge between their colors.
Linear and radial controls
Linear gradients use a degree angle. Radial gradients use a circle or ellipse shape. The generated CSS uses ordinary linear-gradient() and radial-gradient() functions supported by modern browsers.
Preview locally, then copy
The preview uses your browser’s CSS renderer and updates as you change a control. No color or CSS value leaves the page. Use two stops for a simple blend or up to six for a more layered background.
常见问题
你可能还想知道
Why did a color stop move?
The editor sorts stops by their percentage so the generated CSS is easy to read. Stops with equal positions keep their current order.
How can I create a sharp transition?
Give two neighboring colors the same position. CSS switches directly from the first color to the next at that point.
What does the linear angle mean?
0deg points upward, 90deg points right, 180deg points down, and 270deg points left.
Does the tool upload colors or CSS?
No. It creates the preview and copied declaration locally in your browser.