CSS渐变生成器

创建线性和径向CSS渐变。以可视化方式选择颜色，并复制生成的CSS。

颜色 1

颜色 2

角度: 135°

background: linear-gradient(135deg, #535beb, #7c3aed);

如何使用本工具

1
Click the Color 1 swatch and choose your starting color from the native color picker.
2
Click the Color 2 swatch and choose the color the gradient fades into.
3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.

CSS渐变是两种或多种颜色之间的颜色过渡。线性渐变沿一个方向流动；径向渐变则从一个点向外发散。本生成器覆盖常见场景；对于带有自定义位置的复杂多色标渐变，请手动创建。

Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.

渐变的性能高吗？▼

高：比渐变图片要划算得多。它们可缩放到任意尺寸而不损失质量。

我可以为渐变添加动画吗？▼

不支持直接为渐变添加动画；可通过JavaScript为渐变的相关属性添加动画，或使用background-position的技巧。