CSS Gradient Generator

Gradients are one of the easiest ways to make a plain interface feel modern — hero backgrounds, buttons, cards, and overlays all come alive with a smooth blend of colour. Writing the CSS by hand, though, means remembering syntax and guessing at angles. This generator lets you design visually and copy the exact code.

Linear vs radial

A **linear gradient** blends colours along a straight line whose direction you set with an angle (0° is bottom-to-top, 90° is left-to-right). A **radial gradient** blends outward from a centre point in a circle. This tool supports both and previews them live as you tweak.

How to use it

Pick two colours with the colour picker or by typing hex values, choose linear or radial, and — for linear — drag the angle slider. The live preview updates instantly, and the CSS output is ready to copy into any element's `background` property.

Tips for good gradients

- Keep the two colours close in brightness for a subtle, professional look; far apart for bold, energetic backgrounds. - Analogous colours (neighbours on the colour wheel) blend most smoothly. - The "Random" button is a fast way to discover combinations you wouldn't have picked.

Everything runs in your browser — no build step, no dependencies.