컬러 및 위치 설정
0%
50%
100%
고급 설정
컬러 조화 템플릿
실시간 미리보기
#FF6B6B
0%
#FFEB3B
50%
#4ECDC4
100%
컬러 위치 조절
시작끝
CSS 코드
background: linear-gradient(to bottom, #FF6B6B 0%, #FFEB3B 50%, #4ECDC4 100%);
컬러 분석
색온도혼합
채도 균형균형
명도 대비중간
추천 용도웹 배경
알아두기
- 3색 그라데이션은 2색보다 풍부한 색감 표현이 가능해 다이나믹한 배경·배너·포스터 디자인에 적합합니다.
- 중간 색상(Middle Color)을 두 끝 색상 사이의 중간 색조로 설정하면 자연스러운 3색 전환을 연출할 수 있습니다.
- CSS
linear-gradient()에서 색상 정지점(Color Stop) 퍼센트를 조절하면 그라데이션 영역을 정밀하게 제어합니다. - 생성된 코드를 복사해 웹 배경, 버튼, 카드 등 UI 컴포넌트에 즉시 적용해보세요.