A generated gradient looks like one opaque string that you paste and hope for the best. It is really three token groups, and each group maps to one control in our CSS gradient generator. Break the string into those groups and you can edit any gradient by hand when the visual editor is not open.
The three output templates
The generator emits one declaration, background followed by the gradient function. Each of the three type buttons produces a different function head with different first tokens. These are the exact shapes from the component:
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
background: radial-gradient(circle, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
background: conic-gradient(from 90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
The first line is the tool state on first load, a linear gradient at the default 135 degree angle with the three default stops. The second line is what you get when you switch to radial with the same stops. The third shows a conic gradient after moving the angle slider to 90.
Note what changes per type. Linear leads with a bare angle that sets the direction of the color axis. Radial leads with a shape keyword and has no angle at all. Conic leads with the word from followed by an angle that sets where the sweep starts.
Direction tokens and the angle slider
The angle slider runs from 0 to 360 in single degree steps and stays at 135 by default. It appears for linear and conic and disappears for radial, because the radial template has no angle slot.
Two behaviors of that slider are worth knowing before you edit output by hand.
1. Switching to radial hides the angle control but does not reset it. Switch back to linear or conic and your previous angle returns, because the value lives in component state.
2. The same number means different things in the two templates. In linear, the angle aims the gradient axis. In conic, from plus the angle rotates the starting point of the sweep.
When you hand edit a linear gradient, keep the deg unit. The output always writes it, and dropping it while changing the value to a keyword like to bottom right is a rewrite rather than a tweak, since keywords and degrees are two separate syntaxes in CSS.
Color stops and the sort rule
Each stop is a color followed by a space and an integer percentage. Three rules govern the list.
1. The list is re sorted in ascending percentage order every time you add a stop, drag a stop slider, or change a stop color. The order you entered stops in never survives to the output.
2. Two stops are the minimum. The remove button disappears when only two remain, so the output never has fewer than two stops.
3. New stops join with color #a855f7 at 50 percent, then get sorted into place. Expect a purple stop at the middle the first time you press add.
The generator always writes explicit percentages, including 0 and 100. Browsers distribute stops evenly when you omit positions, so explicit percentages make the output self documenting and immune to future stop insertions shifting the implied spacing.
Equal percentages are allowed and produce the one effect most editors hide. Two different colors at the same percentage create a hard edge, a clean vertical or angular cut with no blend. The sort keeps tied stops in entry order, so the second color in your list wins the space after the cut.
Build a hard edge in four steps
1. Open the CSS gradient generator with the default linear gradient at 135 degrees.
2. Drag the middle stop from 50 to 100 so it merges with the end stop position.
3. Drag the last stop from 100 to 50. You now have #8b5cf6 and #ec4899 both sitting at 50.
4. Copy the output, which reads linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 50%). The preview shows a sharp transition at the halfway point of the axis.
What the generator leaves out
The tool emits the standard function with no vendor prefixes and no fallback color. Modern browsers need neither, but a very old browser ignores the whole declaration and renders no background.
Four absences are deliberate scope limits. There is no repeating variant, so repeating-linear-gradient and repeating-conic-gradient require a manual edit of the function name. Radial always outputs the circle keyword, with no ellipse and no extent keywords like closest-side. There are no interpolation hints, the double percentage syntax that shifts the midpoint of a transition between two stops. And stop percentages come from a slider, so you cannot type a fractional position like 33.5 percent.
One more limit comes from the color input itself. Each stop color comes from a native color picker, which yields six digit HEX. If you need an alpha gradient, hand edit the output to rgba() or 8 digit HEX stops after copying.
Checklist before you paste the output
- [ ] The function name matches your intent, linear, radial, or conic.
- [ ] The angle token shape matches the type, bare degrees for linear, from plus degrees for conic, none for radial.
- [ ] Stop percentages ascend left to right in the string.
- [ ] Any duplicated percentage is intentional and marks a hard edge.
- [ ] Manual edits for repeating gradients or alpha stops happened after the copy, so the editor state is not the source of truth anymore.
The fastest way to internalize these tokens is to change one control at a time and watch which part of the string moves. Open the [CSS gradient generator](/en/css-gradient), set the angle to 90, and compare the output against the 135 default above. If your editor produces a different string for the same state, send us the string and the steps.
