How do I copy the gradient into my project?

Click “Copy CSS” to copy a ready-to-use background rule such as background: linear-gradient(90deg, …).

Can I use more than two colors?

Yes. Add as many color stops as you like and drag them along the track to fine-tune their positions.

Gradient Generator

Pick a gradient type, drag stops along the track, or hit “Random gradient” for a beautiful ready-made look — then copy production-ready CSS.

Drag a stop to move it · click the track to add a stop

Selected stop

Pos%

Angle · 90deg

Export

Copy the code or download the gradient as a PNG image.

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

A CSS gradient is a smooth transition between two or more colors. Gradients add depth to buttons, backgrounds and hero sections without using image files.

Frequently asked questions

Linear (a straight line), radial (outward from the center) and conic (rotating around a point).

Must-know facts

Conic gradients sweep around a central point, which is ideal for pie charts and spinning effects.
Radial gradients fan out from a center point, which is great for glows and highlights.

Related tools

These color tools pair naturally with the one you just used — keep exploring.

Palette GeneratorCreate harmonious palettes with lock and export.Color MixerBlend two colors at any ratio and copy the result.Color PickerPick, fine-tune and copy any color in HEX, RGB or HSL.