CSS 그라디언트 가이드: 기초부터 고급 기법까지

CSS 그라디언트는 웹 개발자의 가장 강력한 시각적 도구 중 하나입니다. 이미지 없이 부드러운 색상 전환을 만들 수 있습니다. 이 완전한 CSS 그라디언트 가이드는 모든 것을 다룹니다.

선형 그라디언트

직선을 따라 색상을 전환합니다.

Basic Syntax

/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);

/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);

/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);

/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);

Direction Keywords

background: linear-gradient(to top, ...);         /* 0deg */
background: linear-gradient(to right, ...);       /* 90deg */
background: linear-gradient(to bottom, ...);      /* 180deg - default */
background: linear-gradient(to left, ...);        /* 270deg */
background: linear-gradient(to top right, ...);   /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */

Hard Color Stops (Sharp Transitions)

/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);

/* Three equal sections */
background: linear-gradient(90deg,
  #3b82f6 33.3%, #22c55e 33.3%,
  #22c55e 66.6%, #ef4444 66.6%
);

방사형 그라디언트

중심점에서 바깥쪽으로 색상을 전환합니다.

/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);

/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);

/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);

/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);

/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);

/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
  rgba(59, 130, 246, 0.3), transparent
);

원뿔형 그라디언트

중심점 주위로 색상을 전환합니다.

/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart */
background: conic-gradient(
  #3b82f6 0deg 120deg,   /* 33% */
  #22c55e 120deg 210deg, /* 25% */
  #f59e0b 210deg 300deg, /* 25% */
  #ef4444 300deg 360deg  /* 17% */
);

/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);

/* Donut chart (combine with radial) */
background:
  radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
  conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;

반복 그라디언트

줄무늬와 패턴 만들기에 적합합니다.

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

/* Horizontal stripes */
background: repeating-linear-gradient(
  0deg,
  #1e1b4b, #1e1b4b 2px,
  transparent 2px, transparent 20px
);

/* Repeating radial */
background: repeating-radial-gradient(
  circle, #3b82f6, #3b82f6 5px,
  transparent 5px, transparent 15px
);

/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
  #3b82f6 0deg 10deg, transparent 10deg 20deg
);

다중 레이어 그라디언트

여러 그라디언트를 하나의 요소에 쌓을 수 있습니다.

/* Spotlight overlay on gradient */
background:
  radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
  linear-gradient(135deg, #0f172a, #1e1b4b);

/* Cross pattern */
background:
  linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
  linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;

그라디언트 텍스트

background-clip으로 텍스트에 그라디언트를 적용.

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

/* Animated gradient text (using @property) */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient-text {
  background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rotate-gradient 3s linear infinite;
}

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

그라디언트 테두리

CSS는 그라디언트 테두리를 직접 지원하지 않습니다.

/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
  border: 3px solid;
  border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}

/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
  position: relative;
  border-radius: 12px;
  padding: 3px; /* border width */
  background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
  content: '';
  position: absolute;
  inset: 3px; /* same as padding */
  background: var(--bg-card); /* inner background */
  border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }

/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #3b82f6, #ec4899) border-box;
  border: 3px solid transparent;
  border-radius: 12px;
}

창의적 패턴

반복 그라디언트를 조합하여 복잡한 패턴을 만듭니다.

/* Checkerboard */
background:
  conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
    #1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;

/* Dots */
background:
  radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;

/* Carbon fiber */
background:
  radial-gradient(#333 15%, transparent 16%),
  radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;

성능 및 브라우저 지원

그라디언트는 GPU로 렌더링됩니다.

GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
Zero HTTP requests: Unlike background images, gradients add no network overhead.
Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use @supports for progressive enhancement if targeting older browsers.
Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.

자주 묻는 질문

CSS 그라디언트를 애니메이션할 수 있나요?

직접은 불가하지만 @property나 background-position으로 가능합니다.

linear-gradient와 radial-gradient의 차이?

선형 = 직선. 방사형 = 중심에서 바깥으로.

그라디언트 테두리를 만드는 방법?

border-image 또는 의사 요소를 사용.

성능에 영향을 주나요?

아니요, GPU 렌더링으로 이미지보다 빠릅니다.

색상 밴딩을 방지하려면?

중간 색상 정지점을 추가하고 긴 전환을 사용.

CSS 그라디언트는 다재다능하고 성능이 뛰어납니다. 도구로 실험해 보세요.

CSS 그라디언트 생성기로 디자인 →