SVG Gradient Editor

Build a linear or radial SVG gradient on the canvas. Drag the two end handles to set its position and reach. Drag a color stop along the line, or click the line to add one. Select a stop to adjust its hue, saturation, lightness, and opacity. Press Delete to remove a selected inner stop.

The color sliders use HSL. The SVG and CSS snippets export each stop as an sRGB hex color with separate opacity.

CSS gradient #

This code follows the stops and handles as you edit. Its positions match the 732 × 342 px swatch above.

Loading gradient…

Use the Linear and Radial buttons, or press L and R, to change the gradient type. Press P or click Preview to hide the editing controls. Press P again to return to editing. The component also exposes an editing uniform: set it to 0 to render an SVG with no editor overlay.

The SVG marks its editor group with data-qip-gradient-overlay="true". Each interactive control has a data-qip-gradient-control role. Stop handles also carry data-qip-gradient-stop-index, and channel sliders carry data-qip-gradient-channel. These attributes let a host inspect the controls without relying on SVG element order.