CSS Gradients: The Complete Guide to Linear, Radial, and Conic Gradients

CSS gradients replace what used to require image files with a few lines of code. They render at any resolution, scale to any container, add zero HTTP requests, and cost nothing in file size. Yet most developers only use linear-gradient with two colors and call it done. That's about 10% of what CSS gradients can do.

This guide covers the full picture: linear gradients, radial gradients, and conic gradients — syntax, visual examples, copy-paste recipes, and the performance characteristics that make gradients the right choice over images for most decorative backgrounds. Whether you're building a hero section, a glossy button, or a repeating pattern, gradients handle it natively.

Linear Gradients: The Foundation

A CSS linear gradient creates a smooth color transition along a straight line. The line's direction defaults to top-to-bottom and can be set to any angle or keyword direction. The syntax is straightforward:

/* Basic linear gradient — top to bottom */
background: linear-gradient(#e8a44a, #c026d3);

/* With direction — left to right */
background: linear-gradient(to right, #e8a44a, #c026d3);

/* With angle — 135 degrees */
background: linear-gradient(135deg, #e8a44a, #c026d3);

/* Multiple color stops with positions */
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

The direction argument comes first. You can use keyword directions (to right, to bottom left) or degree values (0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom). After the direction, list your color stops — each is a color value optionally followed by a position percentage.

Color Stop Positioning

Color stops are evenly distributed by default. If you specify three colors without positions, the browser places them at 0%, 50%, and 100%. You can override this to control exactly where each transition happens. This is how you create sharp color boundaries, weighted blends, or hard-edge stripe patterns:

/* Weighted blend — amber dominates */
background: linear-gradient(135deg, #e8a44a 0%, #e8a44a 60%, #c026d3 100%);

/* Hard edge — no transition between colors */
background: linear-gradient(to right, #e8a44a 50%, #c026d3 50%);

When two adjacent stops share the same position (like 50% and 50% above), there's no transition — the color changes instantly. This creates hard-edge stripes and is the foundation for repeating stripe patterns.

Radial Gradients: Circular and Elliptical

A CSS radial gradient radiates outward from a center point. By default it creates an ellipse that matches the container's aspect ratio, with the center as its origin. The syntax adds shape and position control:

/* Basic radial — ellipse from center */
background: radial-gradient(#e8a44a, #08080a);

/* Circle shape */
background: radial-gradient(circle, #e8a44a, #08080a);

/* Positioned at top-left */
background: radial-gradient(circle at top left, #667eea, #08080a);

/* Explicit size — 200px radius circle at center */
background: radial-gradient(circle 200px at center, #e8a44a, transparent);

Radial gradients support the same color-stop positioning as linear gradients. The shape keyword (circle or ellipse) and the at position work together to define where and how the gradient radiates. For spotlight effects, position the center off-axis and fade to transparent or a dark color — this is how most hero section background glows are built.

Size Keywords

Four keywords control how far the gradient extends: closest-side, farthest-side, closest-corner, and farthest-corner (default). These determine where the last color stop lands relative to the container edges. farthest-corner ensures the gradient fills the entire container; closest-side makes it smaller and more concentrated. For most designs, the default is what you want — use closest-side when you need a tight, contained glow effect.

Conic Gradients: Angular Color Sweeps

A conic gradient transitions colors around a center point — like a color wheel or a pie chart. Instead of radiating outward (radial) or moving along a line (linear), it sweeps through colors angularly. This is the newest gradient type and the least used, but it produces effects that are impossible with the other two.

/* Basic conic — full spectrum sweep */
background: conic-gradient(#e8a44a, #c026d3, #667eea, #e8a44a);

/* Starting angle offset */
background: conic-gradient(from 45deg, #e8a44a, #c026d3, #e8a44a);

/* Positioned off-center */
background: conic-gradient(from 0deg at 30% 70%, #667eea, #f093fb, #667eea);

To create hard-edge segments (pie chart slices), use degree-based stop positions where one color's end matches the next color's start. The from keyword rotates the starting angle. Repeat the first color at the end to create a seamless loop — without it, the gradient produces a visible seam between the last and first colors.

Common Gradient Patterns

Beyond simple two-color blends, CSS gradients can produce repeating patterns, glossy surfaces, text fills, and layered backgrounds. These patterns replace what used to require images or SVGs — all in pure CSS, resolution-independent, and zero-weight.

Striped Backgrounds

Repeating hard-edge color stops create stripe patterns. Use repeating-linear-gradient to tile the pattern automatically across the container:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  rgba(232,164,74,0.1) 10px,
  rgba(232,164,74,0.1) 20px
);

Glossy Button Effect

A subtle gradient on a button creates a glossy surface that catches the eye without looking skeuomorphic. Layer a semi-transparent white-to-transparent gradient over a solid background color:

/* Glossy button — layer over background-color */
background: linear-gradient(
  180deg,
  rgba(255,255,255,0.15) 0%,
  rgba(255,255,255,0) 50%,
  rgba(0,0,0,0.1) 100%
);
background-color: #e8a44a;

Text Gradients

CSS can apply gradients directly to text using background-clip: text. This works in all modern browsers and produces eye-catching headline treatments:

.gradient-text {
  background: linear-gradient(135deg, #e8a44a, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Layered Gradients for Depth

CSS supports multiple backgrounds, which means you can layer gradients to create complex effects that would otherwise require Photoshop. Each gradient is separated by a comma:

/* Layered: radial glow + linear overlay */
background:
  radial-gradient(circle at 20% 50%, rgba(102,126,234,0.3) 0%, transparent 50%),
  radial-gradient(circle at 80% 50%, rgba(240,147,251,0.2) 0%, transparent 50%),
  linear-gradient(180deg, #08080a 0%, #111114 100%);

This layered technique is how modern dark-mode hero sections create ambient glow effects. Two or three radial gradients in brand colors, positioned off-center at low opacity, layered over a solid dark background. Zero images, resolution-independent, and trivially adjustable.

6 Gradient Recipes You Can Copy-Paste

Each recipe below is production-ready CSS. Copy the gradient value, apply it to any container's background property, and it works immediately. For more variations, use the CSS Gradient Generator to customize colors, angles, and stops visually.

Performance: Why CSS Gradients Beat Images

CSS gradients are not just convenient — they're measurably faster than image-based alternatives for most decorative backgrounds.

• Zero HTTP requests. Every background image is a network request. Gradients are rendered by the browser's compositor with no download, no latency, no CDN dependency.
• Resolution-independent. A gradient looks identical on a 1x display and a 3x Retina display. An image must ship at 2x or 3x resolution to avoid blur on high-DPI screens — doubling or tripling its file size.
• GPU-composited. Browsers render gradients on the GPU. Animating a gradient's position or opacity uses compositor-only properties, which means 60fps animation without triggering layout or paint.
• Zero file size. A complex gradient that replaces a 30KB hero background image adds a few bytes of CSS. Multiply this across every page and device — the cumulative savings improve Largest Contentful Paint (LCP) directly.

Avoid Gradient Animation Pitfalls

You can't directly animate a gradient's color stops with CSS transitions — the background property doesn't interpolate gradient values. The workaround is to animate the background-position or background-size of an oversized gradient, or use CSS custom properties with @property to register color values as animatable:

/* Animate by shifting background-position */
.animated-gradient {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 100%;
  animation: gradient-shift 6s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

This technique is GPU-friendly because background-position is a compositor property. Avoid animating gradient values through JavaScript by rapidly changing background — that triggers a paint on every frame and will stutter on lower-powered devices.

Browser Compatibility

Linear and radial gradients have been supported in all major browsers since 2013. Conic gradients reached universal support in 2021 with Safari 15. As of 2026, you can use all three gradient types without prefixes or fallbacks in production.

• linear-gradient — Chrome 26+, Firefox 16+, Safari 7+, Edge 12+. Global support: 98%+.
• radial-gradient — Same browser versions as linear. Global support: 98%+.
• conic-gradient — Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. Global support: 96%+.
• repeating-linear-gradient / repeating-radial-gradient — Same versions as their non-repeating equivalents.
• repeating-conic-gradient — Same versions as conic-gradient.

Putting It Together: A Gradient Workflow

Here's the practical approach to using CSS gradients effectively in production projects:

1. Start with a visual tool. Use a gradient generator to experiment with colors, angles, and types. Designing gradients in code is slow; designing them visually and copying the CSS is fast.
2. Set a fallback background-color. Always. Even when support is 98%+, the fallback costs one line and prevents invisible elements on edge cases.
3. Prefer gradients over images for geometric backgrounds. Glows, washes, overlays, stripes, and atmospheric effects should be CSS gradients by default. Reserve images for textures and photographs.
4. Layer gradients for complex effects. Multiple backgrounds with different gradient types and opacities create depth that a single gradient can't achieve. This is how hero sections get ambient glow effects.
5. Animate position, not values. Use background-size and background-position for smooth gradient animations. Avoid JavaScript-driven per-frame gradient recalculation.
6. Test on dark and light backgrounds. A gradient that looks beautiful on white can look muddy on dark surfaces — and vice versa. Always verify on both if your design supports themes.