A colour stop pairs a colour with a position. For example, #FF0000 25% fixes red one quarter along the gradient's progression. Moving a stop changes the transition; adding more stops is not automatically a smoother or better result.

Two colours at 50% create a hard edge

Use red at 0%, red at 50%, blue at 50% and blue at 100%. With a 90deg linear gradient, the left half stays red and the right half stays blue. The two middle stops leave no distance for interpolation. GradientForge sorts percentages but preserves insertion order for equal positions, so swapping those two middle colours changes the transition.

What Add Stop actually inserts

With #000000 at 0% and #FFFFFF at 100%, Add Stop creates #808080 at 50%. It selects the largest adjacent gap, rounds the positional midpoint down and rounds each RGB channel to the nearest integer. Equal gaps choose the earlier one. This insertion rule is specific to GradientForge, not a promise that the new colour equals the browser's interpolated colour. The tool accepts two to eight stops.

Verify the declaration in its real context

Keep a background-color fallback and save the CSS before reloading: palettes are not stored. Test the target browsers and sizes. Check text contrast across the visible gradient, not just one point; the preview certifies neither accessibility nor compatibility.