CSS Gradient Generator — Linear, Radial & Conic

The generator supports all three CSS gradient types: linear (straight line), radial (circular or elliptical), and conic (swept around a centre point). Each type has its own set of controls for direction, shape, and position.

Yes. The tool generates Tailwind CSS utility classes for linear gradients with standard directions. For custom angles or radial/conic gradients, it provides the arbitrary value syntax you can use in Tailwind.

You can add between 2 and 10 colour stops. Each stop has a colour picker and a position percentage (0-100%). Stops are automatically sorted by position when generating the CSS output.

Yes. The CSS output includes the -webkit- prefix for older Safari and Chrome versions, along with the standard syntax. This ensures your gradient works across all modern browsers.

The full-screen preview fills your entire screen with the gradient so you can see exactly how it looks at large scale. This is useful for testing background gradients before using them on a website. Click anywhere to close it.

Yes. Click the "Random" button to generate a random gradient with harmonious colours. The algorithm picks two hues that are 30 to 150 degrees apart on the colour wheel, ensuring the gradient always looks pleasing.

Gradients are not saved between sessions. The tool runs entirely in your browser with no server-side storage. Copy the CSS output to save your gradient, or bookmark the page and recreate it from a preset.

Linear gradients transition colours along a straight line at any angle. Radial gradients radiate from a centre point as a circle or ellipse. Conic gradients sweep colours around a centre point like a colour wheel.