The gradient syntax this tool writes
A gradient is a generated image, not a color, so it goes in background or background-image rather than background-color. The tool outputs one of two functions, always with an explicit percentage on every stop.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
background: radial-gradient(circle, #6366f1 0%, #ec4899 100%);In the linear form, 0deg points up and the angle increases clockwise, so 90deg runs left to right, 180deg runs top to bottom and 270deg runs right to left. The slider covers 0 to 360. The radial form is always a circle centered in the box; there is no control for ellipse shape, position or size keywords.
Color stops and how the browser resolves them
- Colors are blended in the sRGB space by default, so the midpoint of two saturated colors can look grayer than either end. Adding a third stop in a livelier in-between color often fixes this.
- Two stops at the same percentage produce a hard edge with no blend, which is how stripes are made. Set one stop to 50 and the next to 50.
- A stop positioned before an earlier stop is raised to match it, so order matters. The generated CSS is always sorted by position, even if you drag a stop past its neighbour, and "Add color" places the new cyan stop at the midpoint of the widest gap. With stops at 0 and 100 it lands at 50; adding another then lands at 25 or 75.
- You need at least two stops; the remove button is disabled at two.
Practical limits
| Issue | What happens | Workaround |
|---|---|---|
| Banding | Smooth, low-contrast gradients over a large area show visible steps on some displays | Widen the color difference slightly, or layer a subtle noise image on top |
| Text over gradients | Contrast changes along the gradient, so one text color can pass at one end and fail at the other | Test text against the lightest and darkest parts with the contrast checker |
| Background gradients are often omitted unless the user enables background graphics | Do not rely on a gradient to carry meaning |
Unprefixed gradient functions work in all current browsers, so no vendor prefixes are generated. To choose harmonious colors first, start from the color palette generator.