CSS Gradients: Complete Guide (Linear, Radial, Conic, Mesh)

CSS gradients have evolved dramatically. From simple two-color backgrounds to mesh gradients and pattern overlays, modern CSS can create stunning visual effects without a single image.

Linear Gradients

/* Basic linear gradient */
background: linear-gradient(to right, #7c5cfc, #00d4aa);

/* With angle */
background: linear-gradient(135deg, #7c5cfc, #00d4aa);

/* Multiple color stops */
background: linear-gradient(135deg, 
  #7c5cfc 0%, 
  #ff6b6b 50%, 
  #ffd93d 100%
);

/* Repeating linear */
background: repeating-linear-gradient(
  45deg,
  #7c5cfc,
  #7c5cfc 10px,
  transparent 10px,
  transparent 20px
);

Radial Gradients

/* Basic radial */
background: radial-gradient(circle, #7c5cfc, #080810);

/* Positioned */
background: radial-gradient(ellipse at 30% 70%, #7c5cfc, transparent);

/* Multiple stops */
background: radial-gradient(circle at center,
  #ffd93d 0%,
  #ff6b6b 40%,
  #7c5cfc 100%
);

Conic Gradients

/* Color wheel */
background: conic-gradient(
  red, orange, yellow, green, blue, indigo, violet, red
);

/* Pie chart */
background: conic-gradient(
  #7c5cfc 0% 25%,
  #00d4aa 25% 60%,
  #ffd93d 60% 100%
);

/* With starting angle */
background: conic-gradient(from 45deg, #7c5cfc, #00d4aa, #7c5cfc);

Mesh Gradients

True CSS mesh gradients are created by layering multiple radial gradients:

.mesh {
  background-color: #080810;
  background-image:
    radial-gradient(at 0% 0%, #7c5cfc, transparent 60%),
    radial-gradient(at 100% 0%, #00d4aa, transparent 60%),
    radial-gradient(at 50% 100%, #ff6b6b, transparent 60%),
    radial-gradient(at 100% 100%, #ffd93d, transparent 60%);
}

Pattern Backgrounds

/* Dots pattern */
.dots {
  background-color: #0d0d1a;
  background-image: radial-gradient(#7c5cfc 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Grid pattern */
.grid {
  background-image:
    linear-gradient(rgba(124,92,252,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,252,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Diagonal stripes */
.stripes {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(124,92,252,0.1) 10px,
    rgba(124,92,252,0.1) 20px
  );
}