CSS Gradient Generator

Up to six, each with its own hex value and a position from 0 to 100 percent. Two stops at 0 and 100 give an even blend across the whole element. Pushing two stops close together creates a sharp transition, which is how you build stripes and split backgrounds.

In CSS, 0deg points up and 90deg points right, so 135deg (the default here) runs from top left to bottom right. That diagonal reads naturally because it matches how light tends to fall in interfaces. Drag the slider anywhere from 0 to 360 and watch the preview to judge it.

Yes. Open the Radial tab and the output becomes radial-gradient(circle, ...) with your stops intact. Stop positions then describe distance from the center outward instead of distance along a line, so 0% sits in the middle and 100% at the edge.

It does. For conic output the slider sets the starting rotation, written as conic-gradient(from 135deg, ...). Colors then sweep around the center point, which is what you want for pie charts, color wheels, and spinner effects.

Banding happens when two distant colors stretch across a large area and the display can't render enough in-between shades. Add an intermediate color stop, shorten the distance between stops, or pick hues that sit closer together. Subtle gradients band less than high-contrast ones.

Yes, the tool outputs a single standards-compliant background declaration with no vendor prefixes needed. Linear and radial gradients have worked unprefixed for over a decade, and conic-gradient has been supported in every major browser since 2020.

Every stop has a monospace text field next to the swatch, so you can paste exact brand colors like #6366F1 instead of hunting with the picker. The position field beside it accepts any whole number from 0 to 100.