How do I create a CSS gradient?

Pick your colors, choose gradient type (linear, radial, or conic), adjust the angle, and copy the CSS code. The preview updates in real-time.

Can I use more than 2 colors?

Yes! Add up to 5 color stops for complex gradients.

Yes! Click 'Download PNG' to save the gradient as an image file.

Yes, completely free. No signup required.

Create beautiful CSS gradients visually. Pick colors, adjust angles, copy CSS code, or download as PNG.

background: linear-gradient(135deg, #f97316, #ec4899, #8b5cf6);

Gradient Type

Angle: 135°

Colors

Presets

Generate images with gradient backgrounds via our API.

The free plan includes 100 API renders a month. Upgrade only when you need more.