CSS Gradients Explained: Linear, Radial & Conic

CSS gradients are everywhere in modern web design — from the subtle header backgrounds on your favorite apps to the bold hero sections that stop you mid-scroll. But gradients aren't just decorative. They replace image files entirely, which means no HTTP request, no resolution issues on retina screens, and file sizes measured in bytes rather than kilobytes. If you've ever pasted a background property from Stack Overflow without fully understanding it, this guide will change that. By the end, you'll understand exactly what every gradient syntax produces and, more importantly, why — which means you'll spend less time guessing and more time building.

Linear Gradients: The Workhorse

Linear gradients transition colors along a straight line. The basic syntax is background: linear-gradient(direction, color1, color2). The direction controls the angle of that line, and the colors define what you're blending between.

The direction argument accepts either a keyword or a degree value. The keyword form reads like plain English: to right produces a left-to-right gradient, to bottom right runs diagonally from the top-left corner, and to top runs upward. The degree form gives you precise control: 0deg points straight up, 90deg points right, 180deg points down, and so on clockwise. So linear-gradient(135deg, #667eea, #764ba2) produces a popular diagonal purple — a direction that no keyword can express exactly.

The three patterns you'll use most often are vertical (to bottom), horizontal (to right), and diagonal (45deg or 135deg). Vertical gradients are the most natural for backgrounds because they mimic how light falls. Horizontal gradients work well for progress bars and banners. Diagonal gradients feel dynamic and are the go-to choice for hero sections and card backgrounds. All three are trivially easy to explore in a visual tool — which is exactly what CSS Gradient Generator is built for.

Radial Gradients: Beyond the Line

Radial gradients radiate outward from a center point rather than across a straight line. The full syntax is background: radial-gradient(shape size at position, color1, color2). Most of those arguments are optional — radial-gradient(#e66465, #9198e5) works perfectly and produces a centered circular blend.

The shape is either circle or ellipse (the default). An ellipse automatically stretches to fit the element's bounding box, which means on a wide rectangle the gradient is wider than it is tall. A circle is always perfectly round regardless of the element's dimensions — useful when you want a consistent spotlight effect. The size keyword controls how far the gradient extends before it reaches the final color:farthest-corner (default) ensures the gradient always reaches all four corners, while closest-side makes it stop at the nearest edge for a tighter, more concentrated look.

Positioning with at is where radial gradients get genuinely useful. radial-gradient(circle at 30% 70%, #fff 0%, transparent 60%) creates an off-center spotlight — great for glass-morphism buttons and card hover effects. Badges and avatars often use a centered radial gradient to give a subtle sense of depth. And an almost-invisible radial gradient from white to transparent over a colored background is a common trick for adding a soft inner glow without reaching for Photoshop.

Conic Gradients: The Newest Addition

Conic gradients are the youngest member of the CSS gradient family and the most misunderstood. Where a linear gradient transitions along a line and a radial gradient transitions outward from a point, a conic gradient transitions around a point — rotating like the hands of a clock. The syntax is background: conic-gradient(from 0deg, red, yellow, green, red).

The killer use case is pie charts. A donut chart showing 40% one color and 60% another is a single CSS declaration: background: conic-gradient(#4f46e5 0% 40%, #e5e7eb 40% 100%), combined with a border-radius: 50% and a pseudo-element hole punched in the center. No SVG, no canvas, no JavaScript — just CSS. The other obvious use case is a color wheel: conic-gradient(red, yellow, lime, cyan, blue, magenta, red) produces a smooth full-spectrum wheel. Unlike radial gradients, conic gradients understand the concept of "angle" natively, which is why color wheels look correct with conic syntax but require awkward workarounds with radial or linear gradients.

Browser support for conic gradients has been solid across all major browsers since 2021, so there's no reason to hold back. You can also offset the starting angle with from Ndeg — handy when your pie chart needs to start at the top (which is from -90deg) rather than the 3 o'clock default.

Color Stops: The Secret to Beautiful Gradients

Every gradient example so far has used just two colors, but you can define as many color stops as you want. A color stop is simply a color with an optional position: linear-gradient(to right, #f43f5e 0%, #8b5cf6 50%, #06b6d4 100%) blends smoothly through three colors from left to right. The percentage positions tell the browser where each color is at its purest. If you omit the positions, the browser spaces them evenly.

Hard stops are the trick that most developers discover late. When two color stops share the same position — or when one stop's end position equals the next stop's start position — there is no blend. The transition is instant. This is how you create CSS stripes: repeating-linear-gradient(45deg, #000 0px 10px, #fff 10px 20px) produces sharp diagonal stripes with no gradient whatsoever. The repeating- prefix (available on all three gradient types) tiles the pattern across the element, which is more efficient than manually listing dozens of stops.

Transparency stops are equally powerful. Using transparent as a color stop — or any color with an alpha channel like rgba(0,0,0,0.5) — lets you fade an element into whatever is behind it. linear-gradient(to bottom, transparent, rgba(0,0,0,0.8)) is the classic image overlay pattern used on every card that needs legible white text over a photo. One gotcha: when blending throughtransparent in older CSS, the browser interpolates through black, producing an ugly dark band. The fix is to use the zero-alpha version of your actual color: linear-gradient(to bottom, rgba(255,100,50,0), rgba(255,100,50,1)) instead of linear-gradient(to bottom, transparent, #ff6432).

Performance and Best Practices

Gradients beat images on almost every performance metric. A gradient is rendered entirely by the GPU from a short text string — no HTTP request, no decode time, no layout shift. It scales perfectly to any device pixel ratio without a 2x or 3x asset, and it costs the browser a few bytes in the stylesheet rather than kilobytes or megabytes in the network. For decorative backgrounds, this is a clear win. The one area where images still have an advantage is photographic complexity — a rich texture or photograph is not something you want to approximate with dozens of gradient stops.

Text gradients are a popular technique that uses a gradient as a font fill. The CSS pattern is: background: linear-gradient(...); background-clip: text; color: transparent; — you paint the gradient on the element's background, then clip it to the text shape, and make the actual text color transparent so the background shows through. Browsers have supported background-clip: text without a vendor prefix since 2021. Keep the gradient high-contrast enough that the text remains readable at small sizes, and avoid applying it to body copy — it should be reserved for display headings where the decorative effect justifies the slight reduction in readability.

On the performance side, avoid exceeding five or six color stops unless you have a specific design reason. More stops add slightly more GPU work, and they make your CSS harder to reason about and maintain. If you find yourself reaching for eight stops to achieve a natural-looking blend, consider whether you're fighting the gradient algorithm — picking perceptually uniform colors (working in oklch() color space rather than rgb()) typically produces smoother results with fewer stops. Avoid animating gradients on the background property directly; browsers can't efficiently interpolate between gradient values and will drop frames. Animate opacity, transform, or a background-position shift on an oversized gradient instead.

Skip the Guesswork

Understanding gradient syntax is one thing; finding the exact combination of colors, angles, and stops that looks right is another. Tweaking CSS manually, saving the file, switching to the browser, and refreshing is a slow loop — and it's the kind of friction that turns a two-minute design decision into a twenty-minute yak shave. Our CSS Gradient Generator gives you a live preview that updates as you drag color stops and adjust angles, then copies the production-ready CSS with one click. It runs entirely in your browser — no sign-up, no upload, your design stays on your device. Whether you're building a subtle background, a bold hero, or a CSS pie chart, it's the fastest way to go from idea to code.