Linear gradients change colour along a straight axis, radial gradients spread outward from a centre, and conic gradients turn around a centre. Choose the geometry first; the same two colours can produce a band, a spotlight or a sweep.
An axis versus a distance from the centre
For linear-gradient(), 0deg points upward, 90deg rightward and 180deg downward; the colours progress from the first stop toward the last in that direction. A radial-gradient(ellipse at 50% 50%, ...) instead places its first stop at the box centre and expands toward its ending ellipse. The centre uses the box width and height, so 25% 50% moves it left without rotating anything.
A conic gradient follows an angle, not a radius
In conic-gradient(from 0deg at 50% 50%, ...), the start is above the centre and colours advance clockwise. A 25% stop is a quarter-turn, not a quarter of the radius. Changing from 0deg to from 90deg rotates that start. If the first and last colours differ, they meet at a visible seam; matching them closes the colour loop.
Verify the declaration in its real context
Keep a background-color fallback and save the CSS before reloading: palettes are not stored. Test the target browsers and sizes. Check text contrast across the visible gradient, not just one point; the preview certifies neither accessibility nor compatibility.