How to Create a CSS Gradient: Linear, Radial, and Conic Explained

CSS gradients are image values — they go anywhere an image can go: background, background-image, border-image, even mask-image. Most developers know how to write a basic linear-gradient, but the three gradient types are each significantly more powerful than a simple two-color fade, and layering them opens up effects that used to require image assets.

Build any gradient visually with the DevToolShack Gradient Generator — adjust colors, stops, direction, and type, then copy the CSS.

Linear Gradient

The most common. Goes from one color to another in a straight line.

/* Basic: top to bottom (default direction) */
background: linear-gradient(#00d4aa, #0ea5e9);

/* Angle */
background: linear-gradient(135deg, #00d4aa, #0ea5e9);

/* Direction keyword */
background: linear-gradient(to right, #00d4aa, #0ea5e9);
background: linear-gradient(to bottom right, #00d4aa, #0ea5e9);

/* Multiple color stops */
background: linear-gradient(135deg, #00d4aa 0%, #00b894 45%, #0ea5e9 100%);

/* Hard stop (no blend — stripe effect) */
background: linear-gradient(to right, #00d4aa 50%, #0ea5e9 50%);

Direction Values

• to top, to bottom, to left, to right
• to top left, to bottom right, etc.
• An angle: 0deg = top, 90deg = right, 180deg = bottom, 270deg = left

Radial Gradient

Radiates from a center point outward in a circle or ellipse.

/* Basic circle */
background: radial-gradient(circle, #00d4aa, #0a0c12);

/* Ellipse (default shape) */
background: radial-gradient(ellipse, #00d4aa, #0a0c12);

/* Sized circle */
background: radial-gradient(circle 200px, #00d4aa, transparent);

/* Positioned center */
background: radial-gradient(circle at top left, #00d4aa, transparent);
background: radial-gradient(circle at 30% 70%, #00d4aa, transparent);

Common Radial Gradient Patterns

/* Spotlight / glow effect */
background: radial-gradient(circle at 50% 0%, rgba(0,212,170,0.3), transparent 60%);

/* Vignette (dark edges) */
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%);

Conic Gradient

Rotates around a center point — like the face of a clock. The newest and most versatile gradient type, used for pie charts, color wheels, and geometric patterns.

/* Basic conic — goes through all hues */
background: conic-gradient(red, yellow, green, blue, red);

/* Pie chart — 3 segments */
background: conic-gradient(
  #00d4aa 0% 33%,
  #0ea5e9 33% 66%,
  #00b894 66% 100%
);

/* Positioned center */
background: conic-gradient(from 0deg at 30% 50%, #00d4aa, #0ea5e9);

/* Starburst / pinwheel */
background: conic-gradient(
  #00d4aa 0deg, #00d4aa 30deg,
  #0a0c12 30deg, #0a0c12 60deg,
  #00d4aa 60deg, #00d4aa 90deg,
  #0a0c12 90deg, #0a0c12 120deg
);

Color Stop Syntax

Every gradient type supports the same color stop syntax:

/* Position as percentage */
linear-gradient(to right, red 0%, blue 100%)

/* Position as length */
linear-gradient(to right, red 0px, blue 300px)

/* Multiple positions (same color, hard stop) */
linear-gradient(to right, red 30%, blue 30%, blue 70%, red 70%)

/* Hint (controls midpoint position) */
linear-gradient(to right, red, 30%, blue)  /* midpoint pulled to 30% */

Layering Gradients

You can layer multiple gradients as comma-separated values — first listed is on top:

/* Gradient overlay on a color background */
background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  linear-gradient(135deg, #00d4aa, #0ea5e9);

/* Radial glow + linear background */
background:
  radial-gradient(circle at 20% 20%, rgba(0,212,170,0.15), transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(14,165,233,0.1), transparent 50%),
  #0a0c12;

/* Striped pattern using hard stops */
background: repeating-linear-gradient(
  45deg,
  #00d4aa,
  #00d4aa 10px,
  transparent 10px,
  transparent 20px
);

Repeating Gradients

The repeating- prefix creates a pattern that tiles based on the first full gradient cycle:

/* Repeating stripes */
background: repeating-linear-gradient(
  90deg,
  #00d4aa 0px, #00d4aa 4px,
  transparent 4px, transparent 20px
);

/* Repeating radial rings */
background: repeating-radial-gradient(
  circle at center,
  transparent 0px, transparent 20px,
  rgba(0,212,170,0.3) 20px, rgba(0,212,170,0.3) 21px
);