Introducing the Gradient Generator — Linear, Radial, Conic

Hand-writing gradient CSS is fiddly — angles point in non-obvious directions, stop positions are easy to misplace, and conic syntax is unfamiliar. The new Gradient Generator lets you design by eye and copy CSS that’s correct the first time.

What it does

• Three types: linear, radial, and conic gradients in one tool.
• Colour stops: two to six stops, each with its own colour and position slider.
• Presets: six ready-made palettes to start from.
• Live preview: every control updates the preview instantly.
• Safe output: copy the gradient with a solid-colour fallback for older browsers.

Why it matters

A visual generator removes the guesswork from gradient syntax, so you spend time choosing colours instead of debugging declarations. The output is plain, standards-based CSS you can paste into any project.

Learn more

New to conic gradients or unsure which type to use? Our CSS gradients guide walks through linear, radial, and conic with worked examples — then try it live in the Gradient Generator.