Color Gradient Palette Maker | CSS Gradients and Stepped Swatches in One Pass

Pick 2 to 5 colors and generate a smooth gradient plus an evenly-stepped palette at the same time. Toggle linear or radial, dial in any angle from 0 to 360 degrees, set 3 to 24 steps, and copy both the linear-gradient() CSS and a plain HEX code list.

💡 About this tool

If you have ever eyeballed the midpoint between two brand colors and ended up with a muddy in-between, this saves the guesswork. One set of color stops drives two outputs: the CSS string you paste into a stylesheet, and a grid of interpolated swatches you can lift one HEX at a time. Click any swatch to copy its value straight to your clipboard, which beats retyping #A952A4 into a design panel by hand.

The step count is the part people underuse. Need a 5-tier UI scale from a single accent? Set steps to 5. Building a 24-stop heatmap legend? Crank it up. The linear and radial modes share the same color stops, so you can lock in a palette and flip between a banner-style sweep and a spotlight glow without re-picking anything.

🧐 Frequently Asked Questions

Is the CSS production-ready? Yes. It outputs as background: linear-gradient(90deg, #ec1380 0%, #00f0ff 100%);, so it drops straight into a background property. Switching to radial produces radial-gradient(circle, ...) instead.

What exactly does the step slider change? It sets how many swatches appear in the palette and HEX list. At 3 you get start, middle, and end; at 24 you get a fine tonal ramp. It does not change the CSS gradient itself, which always uses the 2-5 colors you entered as its stops.

Why do the mid swatches sometimes look washed out? This is the classic result of interpolating in RGB space. Blending a saturated pink and a saturated cyan passes through a desaturated middle. If you want punchier mids, add a third color in the middle instead of relying on a two-color blend.

Can I use this for Tailwind or SCSS color scales? The HEX list gives you the raw values; paste them into your theme.extend.colors or a SCSS map. The tool outputs values, not framework-specific syntax.

📚 Fun Facts

The reason a magenta-to-cyan blend dips toward gray in the middle is that RGB interpolation moves in a straight line through a cube-shaped color space, and that line passes near the low-chroma center. Perceptual color spaces like OKLCH were designed to avoid exactly this by keeping lightness and chroma steady as the hue rotates. For a quick CSS background or a UI tint scale, plain RGB stepping is fine and predictable; for data visualizations where every step needs to read as equally different, that gray dip is the thing color scientists spend whole papers trying to remove.