Which gradient types are supported?

linear-gradient, radial-gradient, and conic-gradient are supported.

Is there a limit on color stops?

You can freely add multiple color stops.

Can the generated CSS be used as-is?

Yes. Copy the code and paste it directly into your CSS file.

Is my data sent to a server?

All processing happens in the browser. No data is sent to a server.

How do I specify the gradient angle?

For linear gradients, you can set the angle from 0 to 360 degrees using a slider or numeric input. The preview updates in real time as you adjust the angle.

CSS Gradient Generator - Create Linear, Radial, and Conic Gradients

Select gradient type from dropdown. Add multiple color stops to create beautiful CSS backgrounds.

Preview

Angle / Direction Direction

90°

Color Stops

#6366f10%

#ec4899100%

CSS Output

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

How to Use

Select gradient type (linear/radial/conic)
Add and edit color stops
Set direction/angle
Copy CSS code

FAQ

Which gradient types are supported?: linear-gradient, radial-gradient, and conic-gradient are supported.
Is there a limit on color stops?: You can freely add multiple color stops.
Can the generated CSS be used as-is?: Yes. Copy the code and paste it directly into your CSS file.
Is my data sent to a server?: All processing happens in the browser. No data is sent to a server.
How do I specify the gradient angle?: For linear gradients, you can set the angle from 0 to 360 degrees using a slider or numeric input. The preview updates in real time as you adjust the angle.

Related Tools

Update History

Last Updated: 2026-02-21

2026-02-21 Initial release