返回工具列表
渐变生成器
颜色创建CSS渐变。
ttb run gradient-generator
135°
0%
50%
100%
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
分享此工具：
如何使用 渐变生成器
Select two or more colors and set the gradient direction (linear, radial, or conic). Adjust color stops by dragging handles on the gradient bar. The live preview updates instantly. Copy the generated CSS code - including vendor prefixes for maximum browser compatibility - and paste it into your stylesheet.
1
Enter your parameters
Configure the inputs for the Gradient Generator according to your specific needs.
2
View real-time results
The utility instantly processes your request and displays the calculated outputs directly in your browser.
3
Copy or Download
Click the copy icon next to the final output to instantly grab the result, or export it if applicable.
常见问题
What is a CSS gradient?+
A CSS gradient is a smooth transition between two or more colors, rendered by the browser without images. Linear gradients flow in a straight line, radial gradients radiate from a center point, and conic gradients sweep around a point like a pie chart.
Do gradients affect performance?+
CSS gradients are rendered by the GPU and are extremely performant - often faster than loading an equivalent image. They are resolution-independent (no pixelation on retina displays) and add zero HTTP requests.