CSS Gradient Generator

What this tool does

CSS Gradient Generator lets you build a linear, radial or conic gradient visually, with as many colour stops as you need, each independently positioned, previewing the result live and giving you the exact background CSS to copy.

Hand-writing a CSS gradient with several colour stops at precise positions means guessing percentages and iterating in a browser dev tool, slow for anything beyond a simple two-colour fade.

This tool builds the gradient visually: pick a type (linear, radial or conic), add as many colour stops as you like, drag each one’s position, and see the result update live, with the exact CSS ready to copy at any point.

How to use CSS Gradient Generator

1. Choose a gradient type: linear, radial or conic.
2. Set the angle (for linear/conic gradients).
3. Add, remove and position colour stops using the colour pickers and sliders.
4. Copy the generated CSS output.

Tips for better results

• Colour stops are automatically sorted by position in the generated CSS regardless of the order you added them, so you don’t need to add them left-to-right.
• A radial gradient radiates outward from its centre in a circle; this tool keeps the centre fixed at 50% 50% for simplicity, edit the generated CSS manually if you need an off-centre radial gradient.
• A conic gradient sweeps colours around a centre point like a colour wheel or pie chart, rather than radiating outward or across in a straight line, useful for things like a progress ring or colour picker wheel.
• Three or more colour stops create smoother, richer transitions than a simple two-colour gradient; try adding a middle stop with a different hue for a more dynamic result.

Common use cases

• Creating a background gradient for a hero section, button, or card.
• Building a smooth multi-colour gradient for a brand or design system.
• Generating a conic gradient for a custom progress ring or colour wheel UI element.
• Experimenting with gradient angles and stops before committing to a final design choice.

Common mistakes to avoid

• Using too many colour stops with similar hues, producing a muddy, undefined-looking gradient rather than a clean transition; two to four well-chosen stops usually look cleaner than many similar ones.
• Forgetting that a radial gradient’s shape and position settings (beyond this tool’s simple centred circle) offer more control in the full CSS specification, worth exploring manually for advanced effects.
• Not checking contrast when placing text over a gradient background, some areas of a multi-stop gradient may have very different brightness, affecting text readability differently across the element.