CSS Gradient Generator

Use radial for spotlight effects, vignetting, and anything where a single point of interest radiates outward (hero backgrounds, skeleton-loader shimmer). Use linear for sky-to-ground effects, section dividers, and most button or panel backgrounds. When in doubt, pick linear — it's the more neutral default.

That's an 8-bit colour-depth limit — you can only have 256 intermediate steps per channel. Mitigate with a wider hue range (avoid dark-to-near-dark), added noise texture, or a wider-gamut colour space like oklch() which spreads perceptual steps more evenly.

Not directly — CSS can't interpolate between two gradient values. Workarounds: animate background-position on an oversized gradient, fade between two layered gradients with opacity, or use conic-gradient inside an @property for browsers that support animatable custom properties.

linear-gradient goes in a straight line; radial radiates from a point; conic sweeps around a point like a clock hand. Conic is what you'd use for pie charts, colour wheels, and circular loaders. All three support the same colour-stop syntax.

Usually because the first and last colour stops don't match. For seamless conic gradients, start and end on the same colour. For linear backgrounds that repeat, make sure stops are placed at 0% and 100% and match. For radial, place a matching stop at the outer edge.