Comprehensive Guide to CSS Background Gradients: Radial, Linear, Conic, and Repeating

Background

The designer's original mockup shows a gradient that the export tool failed to recognize, prompting the need to ask the designer for precise gradient attributes such as type, points, and colors. Front‑end developers must therefore understand the background-image property.

Radial Gradient

CSS radial gradients are created with the radial-gradient() function. The MDN syntax is:

<radial-gradient()> =
  radial-gradient([ <ending-shape> || <size> ]? [ at <position> ]?, <color-stop-list> )

ending-shape : optional, can be ellipse or circle .

size : optional, can be explicit dimensions or keywords like closest-side , farthest-side , closest-corner , farthest-corner .

at position : optional, specifies the gradient’s origin (e.g., top , bottom left ).

color-stop-list : required list of colors and optional stop positions; at least two colors are needed.

Examples:

selector {
  /* simple red‑to‑green radial gradient */
  background-image: radial-gradient(#ff0000, #00ff00);
}

selector {
  /* circular radial gradient */
  background-image: radial-gradient(circle, #ff0000, #00ff00);
}

selector {
  /* elliptical gradient with explicit size */
  background-image: radial-gradient(200px 100px, #ff0000, #00ff00);
}

selector {
  /* elliptical gradient with size and position */
  background-image: radial-gradient(200px 100px at top left, #ff0000, #00ff00);
}

In production code the team removed rotation, set the ellipse’s vertical axis to 100rpx , and used the top‑left corner as the center:

.recently-live {
  background-image: radial-gradient(100% 100rpx ellipse at 0 0, #dbeaff, transparent);
}

Linear Gradient

The syntax for linear gradients is:

linear-gradient([ <angle> | to <side-or-corner> , ]? <color-stop-list> )

Direction can be specified with keywords ( to top , to right , etc.) or an angle ( 45deg ). Examples:

background-image: linear-gradient(to top, red, blue);

background-image: linear-gradient(45deg, red, blue);

background-image: linear-gradient(0% 0%, 100% 100%, red, blue);

Color stops can include positions (e.g., red 0% , blue 20% , green 100% ).

background-image: linear-gradient(red 0%, blue 20%, green 100%);

Conic Gradient

Conic gradients rotate around a center point. Syntax is similar to radial gradients:

background: conic-gradient(from 0.5turn at 10% 50%, crimson, cyan);

Another example with custom angles and colors:

background-image: conic-gradient(from 0.25turn at 80% 30%, orange, 10deg, cadetblue, 350deg, #fff);

Repeating Gradients

Repeating versions of linear, radial, and conic gradients repeat the pattern until the element is filled.

background-image: repeating-linear-gradient(blue 0, black 10%);

background-image: repeating-conic-gradient(red, yellow 30deg);

background-image: repeating-radial-gradient(blue 0, black 8%);

When the gradient does not cover the whole area, a normal gradient extends the last color, while a repeating gradient tiles the pattern.

Summary

The article consolidates common CSS background gradient techniques, covering radial, linear, conic, and their repeating forms, and shows how to translate design specifications into accurate CSS code. It encourages developers to experiment with gradients to create visually appealing effects.