CSS 그라디언트 가이드: 선형, 방사형 및 원추형 그라디언트

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

/* Top to bottom (default) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* Left to right */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* Diagonal */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

/* 45-degree diagonal from bottom-left to top-right */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* 135-degree diagonal from top-left to bottom-right */
background: linear-gradient(135deg, #667EEA, #764BA2);

/* Three-stop gradient */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Positioned stops */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Hard color stop (no transition) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

/* Gradient lingers longer in the blue range */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

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

/* Simple center radial */
background: radial-gradient(#FFF176, #F57F17);

/* Explicit circle */
background: radial-gradient(circle, #A8E063, #2D6A4F);

/* Circle: same radius in all directions */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Ellipse: stretches to fit element dimensions */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

/* Small spotlight in the top-left */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

/* Off-center gradient for a lighting effect */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Bottom-center spotlight */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

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

/* Basic conic gradient */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* Starting at 90 degrees */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

/* Pie chart: 40% red, 35% blue, 25% green */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
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%)
);
border-radius: 50%;

/* Checkerboard */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

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

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

/* Fade out at bottom (content below stays visible) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

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

/* Correct: transparent version of the blue */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Incorrect: introduces gray banding */
background: linear-gradient(to right, #3B82F6, transparent);

/* Diagonal overlay on a solid color */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Noise texture simulation with gradients */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

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

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

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

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;