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

CSS Gradients as Image Values

A crucial and often misunderstood fact about CSS gradients: they are image values, not colour values. This means they work wherever a CSS image is accepted: background-image, background, border-image, mask-image, list-style-image, and even as content in ::before and ::after pseudo-elements. They cannot be used as a color or border-color value. The MDN CSS gradient documentation covers all gradient types in depth.

Gradients also have no intrinsic dimensions — they expand to fill whatever space their container provides. This makes them infinitely scalable and resolution-independent, unlike raster image files.

Linear Gradients

Linear gradients transition colours along a straight line. They are the most common gradient type and the foundation of most gradient design work.

Basic Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction Notation

The direction can be specified as a keyword or an angle:

• to bottom (default) — top to bottom
• to right — left to right
• to bottom right — diagonal
• 45deg — 45-degree angle (clockwise from top)
• 0deg — bottom to top
• 90deg — left to right
• 180deg — top to bottom

/* Simple two-colour gradient */
background: linear-gradient(to right, #6c5ce7, #fd79a8);

/* Angled gradient */
background: linear-gradient(135deg, #6c5ce7, #00cec9);

/* Three colour stops */
background: linear-gradient(to bottom, #fff 0%, #6c5ce7 50%, #000 100%);

Angle values follow a clockwise convention starting from the top of the element. 0deg points straight up (equivalent to to top), and increases clockwise. This differs from mathematical angle convention where 0° points right and increases counter-clockwise.

Radial Gradients

Radial gradients radiate outward from a central point, creating circular or elliptical colour transitions. They are ideal for spotlight effects, glowing buttons, and circular decorative elements.

Syntax

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

Shape

• circle — perfectly round gradient
• ellipse (default) — elliptical, matches element proportions

Size Keywords

• closest-side — gradient ends at the nearest edge
• farthest-side — gradient ends at the farthest edge
• closest-corner — gradient ends at the nearest corner
• farthest-corner (default) — gradient ends at the farthest corner

/* Classic spotlight effect */
background: radial-gradient(circle at center, #fff, #6c5ce7);

/* Off-centre glow */
background: radial-gradient(circle at 30% 70%, rgba(108,92,231,0.8), transparent 60%);

The at position syntax accepts any valid CSS position value: percentages, lengths, or keywords like top left. Moving the centre point off-edge creates dramatic directional lighting effects. The MDN radial-gradient reference covers all options.

Conic Gradients

Conic gradients rotate colour stops around a central point, rather than radiating outward. The result is a "pie chart" style transition. They were added to CSS in 2021 and are now supported in all modern browsers.

Syntax

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Pie chart: 40% red, 30% blue, 30% green */
background: conic-gradient(red 0deg 144deg, blue 144deg 252deg, green 252deg 360deg);

/* Smooth colour wheel */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Starburst pattern */
background: conic-gradient(from 0deg, #6c5ce7 0% 25%, transparent 25% 50%) 0 0 / 40px 40px;

Hard colour stops (where two stops share the same angle position) create sharp transitions, ideal for pie charts and striped patterns. Smooth stops blend between colours in the same way as linear gradients.

Colour Stops and Positions

Colour stops define the colours in a gradient and, optionally, their positions along the gradient line. Understanding stops deeply unlocks advanced gradient effects.

Implicit vs Explicit Positioning

Without explicit positions, stops are evenly distributed. With positions, you have full control:

/* Even distribution */
linear-gradient(to right, red, blue, green)
/* red at 0%, blue at 50%, green at 100% */

/* Custom positions */
linear-gradient(to right, red 0%, red 30%, blue 30%, blue 100%)
/* Hard stop: creates a sharp red-to-blue edge at 30% */

Transition Hints

A single percentage between two colour stops acts as a transition hint — it moves the midpoint of the colour blend:

/* Blend midpoint pulled toward 20% instead of default 50% */
linear-gradient(to right, red, 20%, blue)

Repeating Gradients

CSS provides repeating variants for all three gradient types: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient(). These tile the defined gradient pattern across the element, which is powerful for creating patterns without images.

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #6c5ce7,
  #6c5ce7 10px,
  transparent 10px,
  transparent 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle at center,
  #6c5ce7 0px,
  #6c5ce7 5px,
  transparent 5px,
  transparent 15px
);

Gradient Animation Techniques

CSS transitions cannot animate background-image values directly — the browser treats gradient changes as discrete jumps rather than smooth transitions. However, several techniques achieve gradient animation:

1. Background Position Animation

Create an oversized gradient (e.g., 400% wide) and animate background-position:

.animated-gradient {
  background: linear-gradient(90deg, #6c5ce7, #fd79a8, #00cec9, #6c5ce7);
  background-size: 300% 100%;
  animation: shimmer 3s linear infinite;
}

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

2. CSS Custom Property Animation

In browsers supporting @property (Houdini), you can register typed custom properties and animate them:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-gradient {
  background: linear-gradient(var(--gradient-angle), #6c5ce7, #fd79a8);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  to { --gradient-angle: 360deg; }
}

Browser Support

Linear and radial gradients enjoy universal support in all modern browsers. According to Can I Use, standard CSS gradients are supported by over 98% of global browser usage. Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+ — effectively all current browser versions. The @property rule for animatable custom properties is supported in Chrome, Edge, and Opera, with Firefox and Safari support arriving in later versions.

For maximum compatibility, use standard gradient syntax without vendor prefixes. Vendor prefixes (-webkit-, -moz-) were required before 2012 but are unnecessary for any currently supported browser.