CSS 그라디언트 완벽 가이드

그라디언트는 현대 웹 디자인에서 가장 많이 사용되는 CSS 효과 중 하나입니다. Instagram, Stripe, Spotify... 모두 그라디언트로 브랜드 아이덴티티를 표현합니다.

이 가이드에서는 CSS 그라디언트의 모든 유형과 실전 활용법을 코드 예제와 함께 알아봅니다.

---

그라디언트 기본 이해

그라디언트 유형

기본 문법

.element {
  background: linear-gradient(direction, color1, color2, ...);
}

---

Linear Gradient: 선형 그라디언트

방향 설정

/* 키워드 방향 */
.to-right { background: linear-gradient(to right, #6366f1, #8b5cf6); }
.to-bottom { background: linear-gradient(to bottom, #6366f1, #8b5cf6); }
.to-top-right { background: linear-gradient(to top right, #6366f1, #8b5cf6); }

/* 각도 방향 */
.angle-45 { background: linear-gradient(45deg, #6366f1, #8b5cf6); }
.angle-90 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.angle-180 { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

방향 키워드 정리

색상 정지점 (Color Stops)

/* 균등 분배 (자동) */
.auto {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
  /* 0%, 50%, 100% */
}

/* 명시적 위치 */
.explicit {
  background: linear-gradient(
    #ff0000 0%,
    #ff0000 30%,    /* 0-30%: 빨강 유지 */
    #00ff00 30%,    /* 30%에서 급격히 변환 */
    #00ff00 70%,    /* 30-70%: 초록 유지 */
    #0000ff 70%     /* 70%에서 급격히 변환 */
  );
}

/* 하드 스톱 (급격한 전환) */
.hard-stop {
  background: linear-gradient(
    #6366f1 50%,
    #8b5cf6 50%
  );
}

실전 예제: 트렌디 그라디언트

/* Instagram 스타일 */
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

/* Stripe 스타일 */
.stripe {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

/* 글래스모피즘 배경 */
.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
}

---

Radial Gradient: 방사형 그라디언트

기본 문법

.radial {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

모양 (Shape)

/* 원형 */
.circle {
  background: radial-gradient(circle, #6366f1, #8b5cf6);
}

/* 타원형 (기본값) */
.ellipse {
  background: radial-gradient(ellipse, #6366f1, #8b5cf6);
}

크기 (Size)

.size-demo {
  background: radial-gradient(circle closest-side at 30% 30%, #6366f1, #8b5cf6);
}

위치 (Position)

/* 키워드 위치 */
.top-left {
  background: radial-gradient(circle at top left, #6366f1, #8b5cf6);
}

/* 백분율 위치 */
.percent {
  background: radial-gradient(circle at 30% 70%, #6366f1, #8b5cf6);
}

/* 픽셀 위치 */
.pixel {
  background: radial-gradient(circle at 100px 50px, #6366f1, #8b5cf6);
}

실전 예제: 스포트라이트 효과

.spotlight {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(99, 102, 241, 0.3) 0%,
      transparent 50%
    ),
    #1a1a2e;
}

// 마우스 따라다니는 스포트라이트
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--mouse-x', `${x}%`);
  document.documentElement.style.setProperty('--mouse-y', `${y}%`);
});

---

Conic Gradient: 원뿔형 그라디언트

기본 문법

.conic {
  background: conic-gradient(from angle at position, color1, color2, ...);
}

기본 예제

/* 색상환 */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* 파이 차트 */
.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 90deg,      /* 25% */
    #8b5cf6 90deg 180deg,    /* 25% */
    #a78bfa 180deg 270deg,   /* 25% */
    #c4b5fd 270deg 360deg    /* 25% */
  );
  border-radius: 50%;
}

시작 각도와 위치

/* 시작 각도 변경 */
.from-angle {
  background: conic-gradient(
    from 45deg,
    #6366f1, #8b5cf6
  );
}

/* 중심 위치 변경 */
.at-position {
  background: conic-gradient(
    at 30% 70%,
    #6366f1, #8b5cf6
  );
}

실전 예제: 도넛 차트

.donut-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #a78bfa 240deg 360deg
  );
  border-radius: 50%;
  position: relative;
}

.donut-chart::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: white;
  border-radius: 50%;
}

---

Repeating Gradients: 반복 패턴

반복 선형

/* 줄무늬 패턴 */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #8b5cf6 10px,
    #8b5cf6 20px
  );
}

/* 경고 테이프 */
.warning-tape {
  background: repeating-linear-gradient(
    45deg,
    #fbbf24,
    #fbbf24 20px,
    #1f2937 20px,
    #1f2937 40px
  );
}

반복 방사형

/* 물결 패턴 */
.ripple {
  background: repeating-radial-gradient(
    circle at center,
    #6366f1 0px,
    #6366f1 5px,
    transparent 5px,
    transparent 20px
  );
}

반복 원뿔형

/* 부채꼴 패턴 */
.fan {
  background: repeating-conic-gradient(
    #6366f1 0deg 10deg,
    #8b5cf6 10deg 20deg
  );
}

---

다중 그라디언트 레이어

레이어 쌓기

.layered {
  background:
    linear-gradient(45deg, rgba(99, 102, 241, 0.5), transparent 50%),
    linear-gradient(-45deg, rgba(139, 92, 246, 0.5), transparent 50%),
    linear-gradient(to bottom, #1a1a2e, #16213e);
}

그라디언트 + 이미지

.overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.8)
    ),
    url('/image.jpg') center/cover;
}

실전 예제: 메쉬 그라디언트 효과

.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, #6366f1 0px, transparent 50%),
    radial-gradient(at 80% 0%, #8b5cf6 0px, transparent 50%),
    radial-gradient(at 0% 50%, #a78bfa 0px, transparent 50%),
    radial-gradient(at 80% 50%, #c4b5fd 0px, transparent 50%),
    radial-gradient(at 0% 100%, #e9d5ff 0px, transparent 50%),
    radial-gradient(at 80% 100%, #fae8ff 0px, transparent 50%),
    #1e1b4b;
}

---

애니메이션 그라디언트

위치 애니메이션

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #c4b5fd
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Hue Rotate 애니메이션

.hue-rotate {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  to { filter: hue-rotate(360deg); }
}

@property로 부드러운 색상 전환

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

.smooth-rotate {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

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

---

그라디언트 텍스트

기본 구현

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

애니메이션 텍스트

.animated-text {
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #6366f1
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3s linear infinite;
}

@keyframes text-shine {
  to { background-position: 300% 0; }
}

---

그라디언트 보더

clip-path 방식

.gradient-border {
  position: relative;
  background: white;
  padding: 2rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit;
}

border-image 방식

.gradient-border-simple {
  border: 3px solid;
  border-image: linear-gradient(45deg, #6366f1, #8b5cf6) 1;
}

---

성능 최적화

GPU 가속 활용

/* transform으로 애니메이션 */
.optimized {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transform: translateZ(0); /* GPU 레이어 생성 */
}

복잡한 그라디언트 대안

/* 많은 레이어 대신 이미지 사용 고려 */
.complex {
  background: url('/gradient.webp') center/cover;
}

---

FAQ

Q1: 그라디언트 색상 선택이 어려워요. 추천 조합이 있나요?

A: Gradient Generator에서 인기 있는 그라디언트 프리셋을 확인하세요. 또한 같은 색상 계열(보라-파랑, 주황-분홍)로 시작하면 자연스럽습니다.

Q2: IE에서 그라디언트가 작동하나요?

A: IE11은 linear-gradient와 radial-gradient를 지원하지만, conic-gradient는 지원하지 않습니다. 2026년 현재 IE 지원은 대부분 종료되었습니다.

Q3: 그라디언트가 번들 크기에 영향을 주나요?

A: CSS 그라디언트는 이미지보다 훨씬 가볍습니다. 복잡한 그라디언트도 몇 줄의 CSS로 표현되어 번들 크기 영향이 미미합니다.

Q4: 그라디언트 투명도는 어떻게 설정하나요?

A: rgba() 또는 hsla()를 사용하세요.

background: linear-gradient(rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));

Q5: 그라디언트 애니메이션이 버벅거려요.

A: background-position 애니메이션 대신 @property로 CSS 변수를 애니메이션하면 더 부드럽습니다. 또는 filter: hue-rotate()를 사용하세요.

---

마무리

CSS 그라디언트 핵심 정리:

1. Linear: 방향 + 색상 정지점
2. Radial: 모양 + 크기 + 위치
3. Conic: 회전 각도 + 위치
4. 다중 레이어: 쉼표로 구분, 위에서 아래로 쌓임
5. 애니메이션: background-position 또는 @property

---

관련 도구