Gradient Step Generator

Generate evenly spaced color steps between two colors. Ideal for building smooth transitions, data visualizations, and gradient-based design tokens.

Start Color

End Color

Number of Steps5

21020

Gradient Preview

Generated Color Steps

#6366F1

Step 1

#855FDB

Step 2

#A857C5

Step 3

#CA50AF

Step 4

#EC4899

Step 5

Color Details

Step	HEX	RGB	Position
1	#6366F1	rgb(99, 102, 241)	0%
2	#855FDB	rgb(133, 95, 219)	25%
3	#A857C5	rgb(168, 87, 197)	50%
4	#CA50AF	rgb(202, 80, 175)	75%
5	#EC4899	rgb(236, 72, 153)	100%

What This Tool Does

Given two colors, this tool generates evenly spaced intermediate colors between them. Specify 2-20 steps and get a smooth gradient palette where each step transitions smoothly from the start color to the end color.

How Gradient Interpolation Works

The tool converts both colors to RGB, then calculates the difference for each channel. It divides this difference by the number of steps to find the increment for each step.

For #3B82F6 (blue) to #10B981 (green) with 5 steps:

Step 1: #3B82F6 (start)
Step 2: #3591C4 (intermediate)
Step 3: #2FA092 (middle)
Step 4: #29AF60 (intermediate)
Step 5: #10B981 (end)

Each channel (R, G, B) changes by a fixed amount per step, creating a smooth transition.

When to Use Gradient Steps

Progress Indicators

A 5-step gradient from gray to green shows completion progress. Each step represents 20% completion with a corresponding color.

Heat Maps

Map data values to gradient steps. Low values get the start color, high values get the end color, middle values get intermediate steps.

Animation Keyframes

Create smooth color animations by tweening through gradient steps. Each step becomes a keyframe in your CSS animation.

Loading Skeletons

The "shimmer" effect on loading placeholders uses a gradient that animates across the element. Generate the steps and apply as keyframes.

Export Formats

CSS Variables export:

:root {
  --gradient-step-1: #3B82F6;
  --gradient-step-2: #3591C4;
  --gradient-step-3: #2FA092;
  --gradient-step-4: #29AF60;
  --gradient-step-5: #10B981;
}

JavaScript array export for use in React, Vue, or animation libraries:

const gradientSteps = [
  '#3B82F6', '#3591C4', '#2FA092', '#29AF60', '#10B981'
];

Frequently Asked Questions

Why do some gradients look muddy in the middle?

RGB interpolation can produce grayish middles when colors are far apart on the color wheel. For cleaner transitions, use colors that are closer together, or interpolate in HSL space (not yet supported).

Can I create a 3-color gradient?

This tool handles 2-color gradients. For 3+ colors, use the Gradient Palette Generator which supports multiple color stops.

How many steps should I use?

5-10 steps works for most cases. More steps = smoother transitions but more CSS. For CSS animations, 10-20 steps give smoother results.

Can I reverse the gradient?

Yes, swap the start and end colors. The tool will generate the same steps in reverse order.

How do I use this for animations?

Export as CSS variables, then create keyframes that animate through each step. Or use the JavaScript array with an animation library like Framer Motion or GSAP.

What's the difference between this and Color Scale Generator?

Color Scale Generator creates variations of a single color (lighter/darker). This tool interpolates between two different colors for a transition effect.

Tips for Better Gradient Steps

Choose compatible colors. Colors close on the color wheel (like blue to green) interpolate more smoothly than opposites (like red to green).

Match lightness for subtlety. If both colors have similar lightness, the gradient feels more like a hue shift than a lightness change.

Test at your target size. A gradient that looks smooth in a large preview might look banded on small elements. Add more steps if needed.

Consider perceptual uniformity. Equal RGB steps don't always look equally spaced to human eyes. Trust your eyes over the math.

Other Free Color Tools

Search tools