Why Gradient
What Gradient does best
Auto-ordered stops
Stops are ordered along the image's axis of greatest hue spread. Natural-feeling gradients.
Linear / radial / conic
Three gradient types with live preview — switch without re-extracting. Gradient Path lets you pick the axis manually.
Use cases
When to reach for this one
01
Hero gradients from photos
Photo → gradient banner without manually picking stops.
02
App backgrounds
Smooth multi-stop gradients for hero sections, cards, splash screens.
03
Print + screen parity
Same gradient across CSS and SVG, no value drift.
About this tool
Stops are sized and ordered to match the image's color flow. Drag stops, change gradient type (linear/radial/conic), and copy the CSS.
FAQ
Questions about Gradient
Along the axis of greatest hue spread in the image — usually left-to-right or top-to-bottom.
Yes — drag to reorder, double-click to edit hex, or use the per-stop swap.
All three. The same stops render in every gradient type live — switch without re-extracting from the image.
2 to 8. Two gives a clean fade, eight produces a richer photo-derived sweep. Most hero gradients work best with 3-5.
Copy CSS or SVG directly, or open in Gradient Maker for advanced editing like easing curves and angle controls.
Continue with this palette in
Send these colors to another tool
Three siblings inside Image Color Studio, three destinations in the wider iColorPalette app. Cards show what your palette would look like there.
Studio siblings