CSS Gradient Builder
NewCreate CSS linear, radial, and conic gradients visually with full CSS output and copy.
Color Stops
Preview
Frequently Asked Questions
Can I type shorthand hex like #fff into a gradient stop?
Not in the manual stop text field. That input only accepts 6-digit hex, even though the color picker itself still lets you choose colors visually.
Why do the angle controls disappear when I switch to radial gradients?
Angle is only used for linear and conic gradients in this tool. Radial mode swaps that control out for shape and position options.
Does it sort my color stops automatically?
Yes. Before generating the CSS string, the tool sorts stops by percentage position so the output stays in gradient order.
Can I remove all the color stops and start from a blank gradient?
No. The remove button only appears when you have more than two stops, so the tool always keeps at least two stops in the gradient.
What happens if I keep adding stops near the end?
New stops are added 20% after the last stop, capped at 100%. If you keep adding, multiple stops can share 100%, which is valid CSS but can create abrupt transitions.