Gradient Editor
Design linear, radial, and conic CSS gradients with a visual editor. Drag color stops, adjust angles, and copy production-ready CSS.
Type
Angle 135deg
Color Stops (2/8)
%
%
CSS
background: linear-gradient(135deg, #e879f9 0%, #38bdf8 100%);
Frequently Asked Questions
›What gradient types are supported?
Linear (straight line), radial (center outward), and conic (sweeping arc). Each type has its own controls for direction, position, and shape.
›Can I add multiple color stops?
Yes. Click anywhere on the gradient bar to add a stop. Drag stops to reposition them, or click to change their color. Remove stops by dragging them off the bar.
›What output formats are available?
CSS (with browser prefixes if needed), SVG gradient definition, and PNG image export.
gradientcsslinearradialconicdesign