CSS Gradient Generator

CSS Gradient Types Explained

CSS supports three gradient types. Linear gradients transition colours along a straight line at any angle. Radial gradients radiate from a central point outward as a circle or ellipse. Conic gradients sweep colours around a centre point like a colour wheel. All three can have multiple colour stops at specific positions.

Using Gradients in Tailwind CSS

Tailwind CSS provides utility classes for linear gradients with the bg-gradient-to-* direction classes combined with from-*, via-*, and to-* colour stops. For radial and conic gradients, or gradients with more than three stops, use arbitrary values or custom CSS. This generator outputs both standard CSS and Tailwind classes when applicable.