GRDCSS 그라데이션 생성기

CSS 그라데이션 완벽 가이드

CSS 그라데이션은 두 개 이상의 색상이 부드럽게 전환되는 효과로, 이미지 파일 없이 순수 CSS만으로 풍부한 시각적 효과를 만들 수 있습니다. 성능 면에서도 이미지 파일보다 훨씬 가벼워 네트워크 요청이 발생하지 않습니다. 이 도구는 색상과 각도를 조절하는 즉시 결과를 미리보기로 확인하고 CSS 코드를 바로 복사할 수 있게 해줍니다.

그라데이션 종류 — linear, radial, conic

linear-gradient — 직선 그라데이션

가장 많이 사용되는 그라데이션으로 특정 방향으로 색상이 전환됩니다. 각도나 방향 키워드로 방향을 지정합니다.

/* 각도 지정 */
background: linear-gradient(135deg, #667eea, #764ba2);

/* 방향 키워드 */
background: linear-gradient(to right, #f093fb, #f5576c);
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

/* 3색 그라데이션 */
background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77);

radial-gradient — 원형 그라데이션

중심에서 바깥으로 퍼지는 원형 그라데이션입니다. 포인트 라이트 효과나 빛나는 버튼에 자주 사용됩니다.

/* 기본 원형 */
background: radial-gradient(circle, #667eea, #764ba2);

/* 중심 위치 지정 */
background: radial-gradient(circle at top left, #a18cd1, #fbc2eb);

/* 타원형 */
background: radial-gradient(ellipse at center, #e0c3fc, #8ec5fc);

conic-gradient — 원뿔형 그라데이션

중심점을 기준으로 회전하는 그라데이션입니다. 파이 차트, 색상환, 로딩 스피너에 활용됩니다.

/* 파이 차트 */
background: conic-gradient(red 0% 25%, blue 25% 50%, green 50% 75%, yellow 75%);

/* 색상환 */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

각도, 방향, 색상 정지점 이해하기

각도 기준

0deg는 아래에서 위, 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래입니다. 시계 방향으로 증가합니다. to right는 90deg, to bottom은 180deg와 동일합니다.

색상 정지점 (Color Stops)

/* 퍼센트로 위치 지정 */
background: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%);

/* 경계선 없는 선명한 전환 */
background: linear-gradient(90deg, red 50%, blue 50%);

/* 투명도 활용 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);

실전 디자인 트렌드 예시

Glassmorphism (글래스 모피즘)

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Mesh Gradient (메시 그라데이션)

.mesh-bg {
  background-color: #e8c5e5;
  background-image:
    radial-gradient(at 40% 20%, #ffd6ff 0px, transparent 50%),
    radial-gradient(at 80% 0%, #c8b6ff 0px, transparent 50%),
    radial-gradient(at 0% 50%, #ffd6ff 0px, transparent 50%),
    radial-gradient(at 80% 50%, #bde0fe 0px, transparent 50%);
}

CSS 변수와 함께 쓰기

:root {
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.btn-primary { background: var(--gradient-primary); }
.btn-warm    { background: var(--gradient-warm); }
.btn-cool    { background: var(--gradient-cool); }

자주 묻는 질문 (FAQ)

그라데이션을 텍스트에 적용할 수 있나요?

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

그라데이션을 애니메이션으로 만들 수 있나요?

gradient 자체는 transition/animation 대상이 아닙니다. 대신 background-position을 활용하거나 @property로 커스텀 프로퍼티를 등록해 애니메이션을 구현할 수 있습니다.

repeating-linear-gradient는 무엇인가요?

repeating-linear-gradient는 패턴을 반복합니다. 줄무늬, 체크보드 패턴 등 배경 패턴을 만드는 데 사용합니다.

/* 줄무늬 패턴 */
background: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #ffffff 10px,
  #ffffff 20px
);

브라우저 호환성은?

linear/radial-gradient는 IE10+, 모든 모던 브라우저에서 지원됩니다. conic-gradient는 Chrome 69+, Safari 12.1+, Firefox 83+에서 지원되며 IE는 미지원입니다.