02 — Gradients & Interpolation

/* 예시 1: 회색 중간이 끼는 그라데이션 */
background: linear-gradient(to right, red, blue);
/* 중간이 진흙색 (~#7f007f의 어두운 보라가 아니라, RGB 평균인 칙칙한 색) */
 
/* 예시 2: 회색 단계를 거치는 hue 변화 */
background: linear-gradient(to right, yellow, blue);
/* 중간이 *회색*. 사람 직관: 초록 → 청록을 거쳐야 하는데 sRGB 평균은 회색 */

/* sRGB (기본, 잘 안 보임) */
background: linear-gradient(red, blue);
background: linear-gradient(in srgb, red, blue);
 
/* OKLCH (사실상 표준) */
background: linear-gradient(in oklch, red, blue);
 
/* hue 보간 방향 명시 */
background: linear-gradient(in oklch longer hue, red, blue);
background: linear-gradient(in oklch shorter hue, red, blue);
background: linear-gradient(in hsl decreasing hue, red, blue);

/* 각도 (12시=0deg, 시계방향) */
background: linear-gradient(135deg, #4a90e2, #f5a623);
 
/* 키워드 방향 */
background: linear-gradient(to bottom right, #4a90e2, #f5a623);
 
/* 다중 stop */
background: linear-gradient(
  to right,
  oklch(62% 0.21 254) 0%,
  oklch(70% 0.18 200) 50%,
  oklch(80% 0.15 145) 100%
);
 
/* hard stop (선명한 경계) */
background: linear-gradient(
  to right,
  red 0% 50%,
  blue 50% 100%
);
 
/* OKLCH 보간 + multi-stop */
background: linear-gradient(
  in oklch to right,
  oklch(60% 0.2 25),
  oklch(60% 0.2 145),
  oklch(60% 0.2 265)
);
/* L=60 고정이라 *진짜로* 같은 밝기의 hue ramp */

/* 기본 — 타원, 중심, 콘테이너 코너까지 */
background: radial-gradient(white, transparent);
 
/* 모양 + 위치 + 크기 */
background: radial-gradient(
  circle 200px at top right,
  oklch(80% 0.15 254 / 0.6),
  transparent
);
 
/* 글로우 효과 패턴 */
.glow-bg {
  background:
    radial-gradient(circle at 20% 30%, oklch(70% 0.2 25 / 0.4), transparent 50%),
    radial-gradient(circle at 80% 70%, oklch(70% 0.2 254 / 0.4), transparent 50%),
    var(--surface);
}

/* 색상환 (color wheel) */
.color-wheel {
  background: conic-gradient(
    in oklch longer hue,
    oklch(70% 0.2 0),
    oklch(70% 0.2 360)
  );
  border-radius: 50%;
}
 
/* 파이 차트 */
.pie {
  background: conic-gradient(
    #4a90e2 0% 25%,
    #f5a623 25% 60%,
    #7ed321 60% 100%
  );
  border-radius: 50%;
}
 
/* gradient border (07장과 연결) */
.fancy-border {
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(from 45deg, #4a90e2, #f5a623, #7ed321, #4a90e2) border-box;
  border: 2px solid transparent;
}

/* 스트라이프 */
background: repeating-linear-gradient(
  45deg,
  oklch(95% 0 0),
  oklch(95% 0 0) 10px,
  oklch(90% 0 0) 10px,
  oklch(90% 0 0) 20px
);
 
/* 도트 패턴 */
background: repeating-radial-gradient(
  circle at 0 0,
  transparent 0 4px,
  oklch(80% 0 0) 4px 5px
);

.button {
  color: oklch(62% 0.21 254);
  background: linear-gradient(
    in oklch,
    color-mix(in oklch, currentColor 20%, transparent),
    color-mix(in oklch, currentColor 5%, transparent)
  );
}
/* color만 바꿔도 그라데이션 색이 함께 따라온다 */

/* 나쁨 */
background: linear-gradient(red, lime);
/* 중간에 칙칙한 갈색이 낀다 */
 
/* 좋음 */
background: linear-gradient(in oklch, red, lime);
/* 중간이 깨끗한 노랑-주황 */

/* 흑색이 슬쩍 끼는 페이드 */
background: linear-gradient(red, transparent);
/* transparent는 *검은색 0 알파*로 해석됨 → 중간이 어두워짐 */
 
/* 명시적 동일 색의 0 알파 */
background: linear-gradient(red, rgb(255 0 0 / 0));
/* 또는 */
background: linear-gradient(in oklch, red, oklch(63% 0.24 25 / 0));

/* 기본 시작은 12시 (0deg) */
background: conic-gradient(red, blue);
/* red가 12시 정 위치, blue가 그 직전 */
 
/* 6시에서 시작 */
background: conic-gradient(from 180deg, red, blue);

/* 나쁨: 큰 그라데이션에 blur — paint 비용 폭증 */
.bg {
  width: 100vw; height: 100vh;
  background: linear-gradient(...);
  filter: blur(40px);
}
 
/* 좋음: 작은 그라데이션을 scale로 크게 */
.bg {
  width: 200px; height: 200px;
  background: linear-gradient(...);
  filter: blur(40px);
  transform: scale(10);
  transform-origin: 0 0;
}

.gradient-text {
  background: linear-gradient(in oklch, #4a90e2, #f5a623);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}