CSS Gradient Generator – Linear, Radial & Conic

A CSS linear gradient transitions between two or more colors along a straight line. You control the direction using an angle (e.g., 90deg for left-to-right) or a keyword (to right, to bottom). Example: background: linear-gradient(90deg, #6366f1, #06b6d4);

A radial gradient radiates outward from a center point, creating a circular or elliptical blend. It is useful for spotlight effects or circular color transitions. Example: background: radial-gradient(circle, #6366f1, #06b6d4);

A conic gradient sweeps colors around a center point, like a colour wheel or pie chart. It uses an angle to define the starting position. Example: background: conic-gradient(from 0deg, red, yellow, green, blue);

Click the "+ Add color" button to add additional color stops (up to 5). Each stop is evenly spaced. You can pick any color with the color picker and the CSS is regenerated instantly.

Color stops define where each color begins and ends along the gradient line. A stop like #6366f1 0% means indigo starts at the beginning. #06b6d4 100% means cyan ends at the end. You can add intermediate stops for more complex multi-color effects.

In Tailwind CSS v3 (JIT mode) and v4, you can use arbitrary values in square brackets. The generated class like bg-[linear-gradient(135deg,#6366f1_0%,#06b6d4_100%)] can be pasted directly into your HTML className and will work in projects with Tailwind JIT.

Yes. Apply the gradient as background-image, then add background-clip: text and -webkit-background-clip: text, and set color: transparent. This clips the gradient to the text shape, creating a gradient text effect.

Linear and radial gradients are supported in all modern browsers and have been for over a decade. Conic gradients have excellent modern browser support (Chrome 69+, Firefox 83+, Safari 12.1+) and are safe to use in 2024+.