CSS Gradient Steps Calculator
Generate evenly spaced color stops between two hex colors — perfect for banding-free gradients, chart scales and tint ramps.
How it works
channelᵢ = start + (end − start) × i/(n−1), for i = 0 … n−1
Each intermediate stop is a straight linear blend of the two endpoints, channel by channel, spaced at equal fractions from 0 to 1. This is exactly what a CSS gradient does between two stops, but materializing the discrete colors is useful for data-viz scales, hand-tuned tint ramps, or SVG where you need named stops. RGB interpolation is simple and predictable; blends that cross very different hues can pass through a muddy midpoint, which is when designers reach for HSL or LCH interpolation instead.
Worked example
From #3498db to #e74c3c in 5 stops: positions 0%, 25%, 50%, 75%, 100%. The red channel steps 52 → 110 → 159 → 208 → 231 while blue falls 219 → 168 → 117 → 66 → 60, giving the sequence #3498db, #6e8fa6, #9f7570, #d05a42, #e74c3c.
Frequently asked questions
How many stops do I actually need in CSS?
For a smooth linear-gradient, just two — the browser interpolates the rest. Generate more stops when you need discrete swatches (a legend, a palette) or when you want a non-linear ramp by placing extra stops off-center.
Why does my midpoint look muddy?
RGB blending averages the raw channels, so two saturated but opposite hues meet at a desaturated gray-ish middle. Interpolating in HSL, HCL or LCH keeps saturation up across the blend and avoids the muddy center.
Can I use these for a heatmap?
Yes — a two-color ramp works, but perceptually uniform scales (like viridis) are better for data because equal value steps look equally different. Use these stops for decorative gradients and simple two-tone scales.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.