CSS Gradients: Complete Guide to linear-gradient, radial-gradient and conic-gradient

CSS gradients have been around since 2012, but in 2026 the picture is complete: linear-gradient, radial-gradient, and conic-gradient are all fully supported across every modern browser, including Safari. Combined with repeating-* variants and background-size, they can replace entire image libraries. This guide covers all three from syntax to production tricks — with live demos rendered directly in your browser.

What are the three types of CSS gradient?

A CSS gradient is an image generated by the browser at render time — no file, no network request. It behaves exactly like a url() in background, background-image, border-image, or mask-image. The three types differ only in direction:

• linear-gradient — colors run along a straight line at a specified angle.
• radial-gradient — colors radiate outward from a center point in a circle or ellipse.
• conic-gradient — colors rotate around a center point, like slices of a pie.
• repeating-* variants — tile the gradient infinitely, enabling pure-CSS patterns.

How does linear-gradient work?

linear-gradient is the most common. Its full syntax is:

background: linear-gradient(direction, color-stop-1, color-stop-2, ...);

What are the direction options?

Direction can be a keyword or an angle:

/* Keywords */
linear-gradient(to right, #6366f1, #22d3ee)      /* left → right */
linear-gradient(to bottom right, #6366f1, #22d3ee) /* diagonal */

/* Angles — 0deg = top, clockwise */
linear-gradient(90deg, #6366f1, #22d3ee)   /* left → right */
linear-gradient(45deg, #6366f1, #22d3ee)   /* diagonal ↗ */
linear-gradient(180deg, #6366f1, #22d3ee)  /* top → bottom (default) */

How do color stops and positions work?

Each color stop is a color value plus an optional position. Without positions, stops are evenly distributed:

/* Evenly spaced — stop at 0%, 50%, 100% */
linear-gradient(90deg, #6366f1, #f472b6, #22d3ee)

/* Explicit positions */
linear-gradient(90deg, #6366f1 0%, #f472b6 30%, #22d3ee 100%)

/* Two positions per stop = hard stop (sharp edge) */
linear-gradient(90deg, #6366f1 0% 50%, #22d3ee 50% 100%)

How do hard stops create striped patterns?

When two adjacent stops share the same position, the transition is instant — a hard edge. Combined with background-size and background-repeat, you get CSS-only patterns with no images:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #6366f1 0px,
  #6366f1 4px,
  #1a1a24 4px,
  #1a1a24 14px
);

/* Checkerboard */
background:
  linear-gradient(45deg, #6366f1 25%, transparent 25%, transparent 75%, #6366f1 75%),
  linear-gradient(45deg, #6366f1 25%, #1a1a24 25%);
background-size: 18px 18px;

This is one of the most underused CSS techniques: gradient + background-size = unlimited geometric patterns with zero HTTP requests. Check CSS3 Patterns Gallery for inspiration.

How does radial-gradient work?

radial-gradient paints colors outward from a focal point:

background: radial-gradient(shape size at position, color-stop, ...);

What are the shape and size options?

Shape: circle or ellipse (default). A circle has equal radius in all directions; an ellipse stretches to the box dimensions.

Size keywords:

• closest-side — gradient reaches the nearest side of the box.
• farthest-corner — gradient reaches the farthest corner (default for ellipse).
• closest-corner / farthest-side — less common, useful for specific effects.

/* Circle, centered */
radial-gradient(circle, #6366f1, #0f0f13)

/* Ellipse reaching farthest corner from a custom position */
radial-gradient(ellipse farthest-corner at 20% 80%, #f472b6, #6366f1)

/* Spotlight effect */
radial-gradient(circle at center, rgba(99,102,241,.4), transparent 60%)

The vignette technique — a dark radial-gradient overlay from transparent center to opaque edges — is widely used in hero sections and card imagery. It draws focus inward and boosts text contrast without affecting the base image.

How does conic-gradient work — and is it safe to use in 2026?

conic-gradient distributes colors by angle around a point rather than by distance. This makes it the natural tool for pie charts, color wheels, and angular patterns.

As of June 2026, conic-gradient has 96.8% global browser support (Can I Use). It landed in Chrome 69 (2018), Safari 12.1 (2019), and Firefox 83 (2020). You can use it in production without a polyfill — just add a background-color fallback for the 3% of ancient Android WebViews.

/* Basic syntax */
background: conic-gradient(from 0deg at center, color-stop, ...);

/* Pie chart: 35% indigo, 25% cyan, 20% pink, 20% yellow */
background: conic-gradient(
  #6366f1 0% 35%,
  #22d3ee 35% 60%,
  #f472b6 60% 80%,
  #facc15 80% 100%
);
border-radius: 50%;

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

The checkerboard using repeating-conic-gradient is arguably cleaner than the linear-gradient version — fewer lines, same effect. This is a good example of conic-gradient solving a problem that previously required a hack.

How do you create gradient text in CSS?

This is one of the most-searched CSS gradient techniques. It requires three declarations:

.gradient-text {
  background: linear-gradient(90deg, #818cf8, #22d3ee, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* unprefixed, for future compat */
}

Two caveats: 1) -webkit-text-fill-color: transparent overrides color, so you need a fallback color declaration before it for accessibility tools that don't render backgrounds. 2) The text becomes part of the background layer — text-shadow will not work on gradient text. Use filter: drop-shadow() instead.

How do you create a CSS gradient border?

CSS does not support border-image with border-radius simultaneously (a long-standing limitation). The cleanest workaround uses a pseudo-element:

.gradient-border {
  position: relative;
  background: #0f0f13; /* your element's background */
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px; /* border thickness */
  background: linear-gradient(135deg, #6366f1, #22d3ee, #f472b6);
  border-radius: inherit;
  z-index: -1;
}

The inset: -2px shorthand (equal to top: -2px; right: -2px; bottom: -2px; left: -2px) controls the border thickness. Increase it for a thicker border. The z-index: -1 pushes the pseudo-element behind the element's background.

How do layered gradients work?

The background property accepts multiple comma-separated values. Each layer is composited in order (first = top). This allows complex effects with no images:

background:
  /* Layer 1 — top: subtle noise grid */
  repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.03) 40px),
  repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.03) 40px),
  /* Layer 2 — mid: radial spotlight */
  radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99,102,241,.3), transparent),
  /* Layer 3 — base: solid dark */
  #0f0f13;

This exact pattern is used in the hero section of cssgenerators.dev itself. Three layers: grid, purple glow from above, dark base. Zero images, zero JavaScript.

What are the performance considerations for CSS gradients?

Gradients are GPU-composited in all modern browsers — they repaint efficiently and scale without any quality loss on retina displays. Compared to background images:

• Gradients win for geometric patterns, vignettes, color washes, noise overlays: no HTTP request, smaller CSS weight, infinite resolution.
• Images win for photographic textures, complex organic patterns, or anything with more than ~6–8 gradient stops: a compressed WebP is smaller and faster to decode than a CSS runtime computation at paint time.

Avoid animating background gradients directly (causes repaint every frame). Instead, animate background-position on a larger static gradient, or use opacity / transform on a pseudo-element overlay.

/* Animated gradient: move background-position, not the gradient itself */
.animated-gradient {
  background: linear-gradient(270deg, #6366f1, #22d3ee, #f472b6);
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

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

What is the browser compatibility for CSS gradients?

• linear-gradient / radial-gradient — 99.5%+ global support. No prefixes needed in 2026. The -webkit- prefix was last required for Safari 6.1 (2013).
• conic-gradient — 96.8% global support (Can I Use). Safe for production with a background-color fallback.
• repeating-* variants — same support as their base type.
• gradient text (background-clip: text) — requires -webkit-background-clip and -webkit-text-fill-color; the unprefixed background-clip is also supported but not sufficient on its own in all browsers yet.

→ CSS Gradient Generator