Multi-Stop Gradient
Build linear gradients with multiple color stops, custom positions, and angles.
Stop 1
Stop 2
Stop 3
CSS
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
Multi-stop gradients+
Unlike two-color gradients, multi-stop gradients place colors at specific positions along the line. This enables richer blends, sunsets, and brand gradients.
Position controls+
Each stop has a 0–100% position. Stops are sorted automatically in the output CSS so order in the UI does not matter.