Choose linear, radial or conic, set the angle and edit every colour stop: the preview paints the same declaration the output panel prints. Stops are held between 0 and 100 percent, the angle between 0 and 360 degrees, and the workbench takes two to eight stops.
Runs locally in your browserThe workbench starts as linear-gradient(135deg, #0f9d66 0%, #2d5bff 55%, #7c3aed 100%). The preview paints that declaration and the output panel prints it, so the code you copy is the gradient you were looking at.
Every control has a measured limit: the angle is held between 0 and 360 degrees, stop positions between 0 and 100 percent, and the stop list between two and eight entries. A value typed outside those bounds is written back to the limit when you leave the field instead of being used silently by the preview.
Three stops, 135 degrees, linear: those are the values the page loads with and the values Reset restores. The output is a single declaration, .gradient-background { background: … ; }, ordered by stop position, so a stop added between 0 and 55 is printed before 55 even though it was added last.
The angle only exists for linear-gradient() and conic-gradient(). Conic prints it as from 90deg at center; radial prints circle at center and no angle. Positions are written with one decimal, the same precision the field shows after you commit.
A gradient needs at least two stops: at two, the × button reports that a gradient requires at least two colour stops instead of removing one. Eight is the ceiling — at eight stops the Add colour stop button is disabled, so the cap is visible rather than a click that does nothing.
Adding uses the widest gap between the stops you already have, which keeps the ramp even: four stops from the default become 0, 28, 55, 100 percent, and the full eight become 0, 14, 28, 42, 55, 67, 78, 100. Reverse stops mirrors every position (100 minus the position) and flips the list; the exported declaration is always sorted by position afterwards.
Stop colours are six-digit HEX values or the colour picker. Three-digit shorthand such as #fff is not expanded — the page keeps the last valid gradient and asks for six digits — and hsl() or rgba() written into a HEX field is refused the same way.
There is no image, SVG or PNG export, no opacity or interpolation-hint slider, no second gradient layer, and no way to preview the ramp inside your own container size. The declaration, copied from the output panel, is the whole product.