Linear vs radial vs conic gradients
The three CSS gradient types use the same colour-stop idea but distribute colour in different ways.
Try all three gradient typesLinear gradients follow an axis
A linear gradient blends along a straight line. It is the most direct choice for page backgrounds, buttons, cards and text because the direction is easy to predict and control.
Radial gradients grow from a point
A radial gradient spreads outward from an origin. Use it for spotlights, glows, vignettes and soft pools of colour, especially as a transparent layer over another background.
Conic gradients rotate around a point
A conic gradient distributes stops by angle around a centre. It suits colour wheels, progress rings and decorative circular effects more naturally than a radial gradient.
You can combine all three
There is no need to choose only one type. A linear base with one or two transparent radial highlights often creates depth, while a conic layer can add a controlled sweep of colour.