A CSS gradient is a generated image whose function defines geometry and whose ordered stops define colour transitions. GradientForge exposes only values that appear in the copied declaration, so preview and source remain auditable.
Map controls to tokens
Select the function first, then read the prefix before the comma-separated stops. Linear uses an angle in degrees. Radial uses circle or ellipse followed by an at-position. Conic uses a from-angle and an at-position. Each colour is followed by its explicit percentage, so there is no hidden automatic spacing in the exported declaration. Change one control at a time and compare the dark code panel with the preview before copying.
Preserve canonical stop order
GradientForge sorts stops from the smallest percentage to the largest and preserves insertion order when percentages are equal. That makes copied output stable and lets two adjacent stops form a deliberate hard edge. Add Stop finds the largest gap, chooses the earliest gap on a tie, places the new stop at its integer midpoint and uses the rounded sRGB midpoint colour. These rules make the same starting document produce the same code every time.
Verify the declaration in its real context
GradientForge previews the declaration with the current browser engine, but a preview is not an accessibility or compatibility certificate. Paste the copied background-image into the intended component, keep an ordinary background-color fallback, and test every supported browser and responsive size. Check foreground text with a dedicated contrast tool at the lightest and darkest visible areas; a gradient can meet a ratio at one point and fail it elsewhere. Preserve the generated stop order when comparing results, because equal-position stops deliberately create a hard edge. The capsule stores no palette or history, so keep accepted CSS in your own source-controlled file before reloading.