본문으로 건너뛰기

CSS 그라데이션 생성기

CSS 선형, 원형, 원추형 그라데이션을 시각적으로 만들고 코드를 복사할 수 있는 무료 온라인 도구입니다.

미리보기

그라데이션 타입

각도

°

색상 포인트

%
%

CSS 코드

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

미리 설정된 그라데이션

주요 기능​

  • 3가지 타입: 선형(linear), 원형(radial), 원추형(conic) 그라데이션
  • 실시간 미리보기: 변경 사항 즉시 확인
  • 색상 포인트: 최대 8개의 색상 포인트 추가
  • 각도 조절: 선형/원추형 그라데이션 각도 설정 (0-360°)
  • 위치 조절: 각 색상의 위치를 0-100% 범위로 설정
  • 미리 설정: 6가지 아름다운 그라데이션 프리셋
  • 원클릭 복사: CSS 코드 즉시 복사

그라데이션 타입​

1. 선형 그라데이션 (Linear Gradient)​

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  • 한 방향으로 색상이 변화
  • 각도로 방향 지정 (0° = 위, 90° = 오른쪽, 180° = 아래, 270° = 왼쪽)
  • 가장 많이 사용되는 타입

사용 예시:

  • 버튼 배경
  • 헤더 배경
  • 카드 배경

2. 원형 그라데이션 (Radial Gradient)​

background: radial-gradient(circle, #3498db 0%, #e74c3c 100%);
  • 중심에서 바깥으로 색상이 변화
  • 원형 효과 생성
  • 스포트라이트 효과에 유용

사용 예시:

  • 배경 장식
  • 버튼 호버 효과
  • 로고 배경

3. 원추형 그라데이션 (Conic Gradient)​

background: conic-gradient(from 90deg, #3498db 0%, #e74c3c 100%);
  • 중심 주위로 회전하며 색상 변화
  • 파이 차트, 컬러 휠 제작에 적합
  • CSS3에서 추가된 비교적 새로운 기능

사용 예시:

  • 파이 차트
  • 프로그레스 링
  • 컬러 휠

색상 포인트 (Color Stops)​

기본 개념​

색상 포인트는 그라데이션에서 특정 색상이 시작되거나 끝나는 위치입니다.

/* 2개 색상 */
linear-gradient(90deg, #FF0000 0%, #0000FF 100%)

/* 3개 색상 */
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

/* 4개 색상 */
linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%)

위치 조절 팁​

  • 0%: 시작 지점
  • 50%: 중간 지점
  • 100%: 끝 지점
  • 겹치는 위치로 설정하면 급격한 색상 전환 가능
  • 균등 분배하면 부드러운 전환

실용 예제​

1. 버튼 그라데이션​

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

2. 배경 오버레이​

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('background.jpg');
  background-size: cover;
}

3. 텍스트 그라데이션​

.gradient-text {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

4. 프로그레스 바​

.progress-bar {
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  height: 8px;
  border-radius: 4px;
  width: 60%; /* 진행 상태 */
}

5. 카드 배경​

.card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 30px;
  border-radius: 12px;
  color: white;
}

프리셋 그라데이션​

Sunset (일몰)​

background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);

따뜻한 오렌지-레드 조합, 활기찬 느낌

Ocean (바다)​

background: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);

시원한 파랑-청록 조합, 깨끗하고 신선한 느낌

Forest (숲)​

background: linear-gradient(90deg, #134E5E 0%, #71B280 100%);

차분한 청록-그린 조합, 자연스러운 느낌

Purple Dream (보라 꿈)​

background: linear-gradient(45deg, #C471F5 0%, #FA71CD 100%);

몽환적인 보라-핑크 조합, 모던하고 트렌디

Fire (불)​

background: radial-gradient(circle, #FDBB2D 0%, #22C1C3 100%);

원형 노랑-청록 조합, 역동적인 느낔

Rainbow (무지개)​

background: linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%);

4색 무지개 효과, 화려하고 생동감

브라우저 호환성​

Linear Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ 모바일 브라우저 전부

Radial Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ 모바일 브라우저 전부

Conic Gradient​

  • ✅ Chrome 69+
  • ✅ Firefox 83+
  • ✅ Safari 12.1+
  • ✅ Edge 79+
  • ⚠️ IE 미지원

성능 최적화​

1. will-change 사용​

.gradient-element {
  will-change: background;
}

애니메이션이 있을 때 GPU 가속

2. 복잡한 그라데이션 대신 이미지​

매우 복잡한 그라데이션은 이미지로 변환하면 성능 향상

3. 재사용 가능한 클래스​

.gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

디자인 팁​

1. 색상 선택​

  • 비슷한 색조: 부드러운 전환
  • 보색: 강렬한 대비
  • 3색 이하: 대부분의 경우 충분

2. 각도 선택​

  • 90°: 왼쪽에서 오른쪽 (가장 일반적)
  • 180°: 위에서 아래
  • 135°: 대각선 (동적인 느낌)

3. 투명도 활용​

background: linear-gradient(90deg,
  rgba(52, 152, 219, 0.8) 0%,
  rgba(231, 76, 60, 0.8) 100%
);

4. 애니메이션​

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

.animated-gradient {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

접근성 고려사항​

1. 명암비​

그라데이션 위의 텍스트는 충분한 명암비 필요 (WCAG 기준 4.5:1)

2. 텍스트 가독성​

/* 텍스트 그림자로 가독성 향상 */
.text-on-gradient {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. 오버레이 사용​

.gradient-with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

관련 도구​