Click anywhere on the axis to add a stop. Double-click a handle to remove it.
Live Preview
Test the gradient directly across hero, card, and button contexts.
Modern browsers render CSS gradients efficiently with GPU acceleration. The main risk appears when large, fixed, or highly complex gradients are layered across multiple surfaces on lower-powered mobile devices.
The page estimates a representative background color from the current stops, then compares light and dark text options against it. This is a practical editing signal rather than a formal substitute for testing the final production layout.
Yes. Linear and radial gradients are exported as native SVG gradient definitions. Conic gradients fall back to a foreignObject wrapper because SVG does not provide a built-in conic gradient primitive.