Build a linear or radial CSS gradient with two or three colour stops, preview it live, and copy the ready-to-use CSS.
The generator assembles a CSS background declaration from the chosen type, angle and stops. Linear gradients run at the set angle (90 degrees points left to right); radial gradients spread out from the centre. Each stop pairs a colour with a position along the gradient, and stops are sorted by position in the output so the CSS stays valid even when sliders cross. The copied declaration can be pasted onto any element as its background.
How is the third colour stop added? Tick the third-stop option and a third colour and position slider appear. The stop joins the others in the preview and the copied CSS.
What does the angle control do? The angle sets the direction of a linear gradient in degrees: 0 points upward, 90 points to the right and 180 points downward. Radial gradients ignore the angle.
Can the generated CSS be used in production? Yes. The output is a standard CSS background declaration supported by all modern browsers, with no vendor prefixes needed.