CSS Gradient Visual Picker

CSS gradients cover more ground than most people use — linear, radial, and conic gradients, each with their own angle/position syntax and support for any number of color stops at custom positions. The CSS Gradient Visual Picker covers all three types with a visual editor: drag to set angle or center point, add and reposition color stops on a gradient bar, and get the finished linear-gradient(), radial-gradient(), or conic-gradient() CSS value.

Pick a gradient type first, since the controls differ meaningfully between them — linear gradients use an angle, radial gradients use a center point and shape (circle or ellipse), and conic gradients rotate around a center point like a color wheel. Add color stops by clicking along the gradient bar, then drag each stop to reposition it or click to edit its exact color and percentage position. The preview updates live, and the generated CSS value is ready to paste directly into a background or background-image property.

FAQ

Why does my gradient banding (visible stripes) instead of smoothing?

Banding usually comes from too few color stops across too large a color range, or from stops placed at the same position — spreading stops out more evenly, or adding an intermediate stop in a large color jump, usually smooths it out.

What’s the difference between a radial gradient’s “circle” and “ellipse” shape?

Circle keeps the gradient perfectly round regardless of the container’s aspect ratio; ellipse stretches to match the container’s width and height proportions. For a non-square container, ellipse (the default) usually looks more natural unless you specifically want a perfect circle.

Can I build a gradient using my project’s exact brand colors rather than a preset?

Yes — every color stop accepts an exact hex or RGB value, so a gradient can be built entirely from specific brand colors rather than starting from a preset palette.

Is there a Tailwind-specific version for projects using utility classes instead of raw CSS?

For linear gradients specifically, the Tailwind Gradient Generator outputs Tailwind’s bg-gradient-to-* utility syntax; radial and conic gradients aren’t natively covered by Tailwind’s gradient utilities and typically need arbitrary value syntax or plain CSS from this tool instead.