Radial Gradients

A radial gradient radiates outward from a center point in an elliptical or circular shape, unlike linear gradients that follow a straight line.

Basic Radial Gradient Syntax

CSS

/* Default: ellipse from center */
.circle-bg {
  background: radial-gradient(#3498db, #2c3e50);
}

Shape: Circle vs Ellipse

CSS

/* Circle (equal in all directions) */
background: radial-gradient(circle, #3498db, #2c3e50);

/* Ellipse (stretches to fit container, default) */
background: radial-gradient(ellipse, #3498db, #2c3e50);

Positioning the Center

CSS

/* Center (default) */
background: radial-gradient(circle at center, #3498db, #2c3e50);

/* Top left corner */
background: radial-gradient(circle at top left, #3498db, #2c3e50);

/* Specific coordinates */
background: radial-gradient(circle at 30% 70%, #3498db, #2c3e50);

/* Pixel position */
background: radial-gradient(circle at 100px 200px, #3498db, #2c3e50);

Size Keywords

Control how far the gradient extends:

CSS

/* Extends to closest side */
background: radial-gradient(circle closest-side, #3498db, #2c3e50);

/* Extends to farthest side */
background: radial-gradient(circle farthest-side, #3498db, #2c3e50);

/* Extends to closest corner */
background: radial-gradient(circle closest-corner, #3498db, #2c3e50);

/* Extends to farthest corner (default) */
background: radial-gradient(circle farthest-corner, #3498db, #2c3e50);

Multiple Color Stops

CSS

/* Bullseye effect */
background: radial-gradient(
  circle,
  #e74c3c 0%,
  #e74c3c 20%,
  white 20%,
  white 40%,
  #e74c3c 40%,
  #e74c3c 60%,
  white 60%
);

/* Soft spotlight */
background: radial-gradient(
  circle at 30% 30%,
  rgba(255,255,255,0.3),
  transparent 60%
);

Practical Radial Gradient Examples

Spotlight Effect

CSS

.spotlight {
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
    #2c3e50;
}

Glowing Orb

CSS

.orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #5dade2,
    #3498db 50%,
    #2471a3 80%,
    #1a5276
  );
}

Dot Pattern

CSS

.dots {
  background:
    radial-gradient(circle, #333 1px, transparent 1px);
  background-size: 20px 20px;
}

Conic Gradients

A conic gradient transitions colors around a center point in a circular sweep, like a color wheel or pie chart.

Basic Conic Gradient Syntax

CSS

/* Default: starts at top, goes clockwise */
.conic {
  background: conic-gradient(#3498db, #e74c3c, #f39c12, #2ecc71, #3498db);
}

Conic Gradient Options

CSS

/* Starting angle */
background: conic-gradient(from 90deg, #3498db, #e74c3c);

/* Center position */
background: conic-gradient(at 30% 70%, #3498db, #e74c3c, #3498db);

/* Combined */
background: conic-gradient(from 45deg at center, red, yellow, green, blue, red);

Practical Conic Gradient Examples

Color Wheel

CSS

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

Pie Chart

CSS

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0deg 120deg,
    #e74c3c 120deg 210deg,
    #f39c12 210deg 300deg,
    #2ecc71 300deg 360deg
  );
}

Progress Ring

CSS

.progress-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0deg 252deg,   /* 70% = 252deg */
    #eee 252deg 360deg
  );
}

Checkerboard Pattern

CSS

.checkerboard {
  background:
    conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
  background-size: 40px 40px;
}

Repeating Conic Gradients

CSS

/* Starburst pattern */
.starburst {
  background: repeating-conic-gradient(
    #3498db 0deg 10deg,
    #2c3e50 10deg 20deg
  );
}

/* Subtle rays */
.rays {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0,0,0,0.03) 0deg 15deg,
    transparent 15deg 30deg
  );
}

Combining Gradient Types

CSS

/* Radial over linear */
.combined {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 50%),
    linear-gradient(135deg, #667eea, #764ba2);
}

Summary

Radial gradients create circular or elliptical color transitions, perfect for spotlights, glowing effects, and dot patterns. Conic gradients sweep colors around a center point, ideal for color wheels, pie charts, and starburst patterns. Both support multiple color stops, positioning, and repeating variants. Combine gradient types for complex, layered visual effects.