A hero banner, a button, a loading bar: two flat colors and a direction cover most of what a gradient needs to do. This tool sticks to exactly that job, linear and radial, so the controls stay on one screen instead of spread across tabs.
Linear or radial, picked up front
Switch the type dropdown and the panel below it changes with it. Linear shows direction and angle controls. Radial swaps those for a position picker, since a radial gradient radiates from a point instead of running along a line. Both share the same color stop list, so a palette built for one carries straight over if you switch types.
Setting the angle the way CSS reads it
The direction dropdown covers the eight compass keywords to bottom, to top right, and so on, plus a Custom angle option that hands control to the slider. The number the slider shows goes straight into the CSS as degrees, following the same convention the spec uses: 0deg points to the top of the box and the angle increases clockwise, so 90deg runs left to right and 180deg runs top to bottom.
A keyword like to bottom right is not the same as 135deg, even though both look diagonal. The keyword form aims at the box's actual corner, so the angle it renders at bends with the element's aspect ratio. A wide banner and a square thumbnail using to bottom right point in visibly different directions. A numeric angle like 135deg holds that exact compass bearing regardless of the box's shape. Reach for the keyword when the gradient should always terminate at a corner, and for a fixed angle when it should look the same on every element.
Stops sort themselves, so list order doesn't matter
Each color stop carries its own position from 0 to 100 percent. Before the CSS gets built, the tool sorts the stops by that position, not by the order you added them in. Add a third stop and type in a position between two existing ones and the gradient inserts it there, even though it sits at the bottom of the list on screen. At least two stops stay required, the remove button on a stop disables itself once only two are left.
What each preset does
Sunset, ocean, forest, purple, and grayscale each drop in a two-color pair. Rainbow is the exception, it loads seven stops spaced evenly across the full color wheel. Clicking any preset replaces every stop currently in the list rather than adding to it, so a custom palette in progress gets cleared the moment a preset is clicked.
Where this tool stops
The radial mode here always builds radial-gradient(circle at <position>). There is no ellipse shape and no size keyword like closest-side or farthest-corner, options CSS does support for radial gradients. Conic and repeating gradients are not covered either. If a project needs any of those, or wants PNG or SVG export alongside the CSS, the Color category's Gradient Generator covers that wider range with the tradeoff of a busier interface.
