The type control switches. The copied CSS matches the preview.

How do I add a colour stop?

Add a stop and set its hex and position. You can have two or three stops.

Will the CSS work in current browsers?

Yes. linear-gradient and radial-gradient are standard CSS.

Gradient Generator

Build a CSS linear or radial gradient, preview it, and copy the code.

TypeAngle120°

Stop 1

Position0%

Stop 2

Position100%

Presets

background: linear-gradient(120deg, #111111 0%, #ff0101 100%);

Worked example

Two stops, #111111 to #ff0101 at 120 degrees, copy as background: linear-gradient(120deg, #111111 0%, #ff0101 100%); Switch to radial for a circle from the centre.

FAQ

Linear or radial?: The type control switches. The copied CSS matches the preview.
How do I add a colour stop?: Add a stop and set its hex and position. You can have two or three stops.
Will the CSS work in current browsers?: Yes. linear-gradient and radial-gradient are standard CSS.