CSS supports three distinct gradient shapes, and picking the right one is really about picking the right underlying geometry for the effect you want.
Linear Gradients
A linear gradient transitions colors along a straight line at a specified angle, producing color bands across the element — a classic top-to-bottom or diagonal color fade. It's the most commonly used gradient type, well-suited to backgrounds, buttons, and overlays.
Radial Gradients
A radial gradient transitions colors outward from a center point in expanding circles or ellipses, creating a spotlight or bullseye-like effect rather than straight bands. It's the right choice when you want attention drawn toward (or away from) a specific point rather than across a directional line.
Conic Gradients
A conic gradient transitions colors around a center point like the hands of a clock sweeping in a full circle, rather than radiating outward (radial) or moving along a straight line (linear). It's the natural fit for pie charts, color wheels, and loading spinners, since the color changes based on rotational angle rather than distance from a point.
What Color Stops Control
A color stop pins a specific color to a specific position along the gradient. Between two stops, the browser smoothly interpolates the transition. Adding more stops gives finer control over where and how abruptly colors change — a gradient with several tightly-spaced stops near one point creates a sharp transition there, while spreading stops out creates a slower, smoother blend.
Gradients vs. Gradient Images
A CSS gradient is rendered directly by the browser from a small amount of code — no image file to download, decode, or cache — and it scales perfectly to any element size with no pixelation or blur. A gradient baked into an image file adds a network request and file size overhead, and can look blurry or banded once stretched beyond its original resolution, which is why CSS gradients are generally the better choice wherever they're achievable.
Creating One Right Now
Build a linear, radial, or conic gradient with a live preview, curated preset palettes, and ready-to-paste CSS code using our free CSS Gradient Generator.
FAQ
What's the difference between a linear and a radial gradient? A linear gradient transitions colors along a straight line at a specified angle, producing bands of color across the element. A radial gradient instead transitions colors outward from a center point in expanding circles or ellipses, producing a spotlight-like or bullseye effect rather than straight bands.
What does a conic gradient actually do differently? A conic gradient transitions colors around a center point like the hands of a clock sweeping in a circle, rather than radiating outward from the center (radial) or moving in a straight line (linear). It's the natural choice for effects like pie charts, color wheels, or loading spinners, since the color change follows a rotational angle instead of distance or direction.
What do color stops control in a gradient? A color stop defines both a specific color and the position along the gradient where that color should appear at full strength. Between two stops, CSS smoothly interpolates the color transition. Adding more stops gives finer control over exactly where and how sharply colors change, rather than being limited to one smooth transition between just two colors.
Are CSS gradients better for performance than a gradient image? Generally yes. A CSS gradient is rendered directly by the browser using a small amount of code, with no image file to download, decode, or cache, and it scales perfectly to any element size without pixelation. An image-based gradient adds an extra network request and file size, and can look blurry or banded if scaled beyond its original resolution.