design
Free
No signup
Multi-Stop Color Gradient Picker
Create beautiful multi-stop CSS gradients visually with drag-and-drop stops.
Loading tool…
About this tool
Build linear or radial gradients with up to 10 color stops, drag stops along the preview bar to reposition them, and instantly get the CSS output. Export your gradient as a CSS property, an SVG gradient element, or download a filled PNG rectangle. Choose from 20 curated presets for instant inspiration.
How to use
- 1 Step 1: Choose a gradient type (linear or radial) and set the angle for linear gradients.
- 2 Step 2: Add color stops by clicking 'Add Stop', then pick a color and set its position.
- 3 Step 3: Drag stops along the gradient bar to fine-tune their positions.
- 4 Step 4: Copy the CSS output or export as SVG / PNG using the export buttons.