%
%
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
🌈 그라데이션 생성기란?
그라데이션 생성기는 CSS 그라데이션을 시각적으로 만들 수 있는 온라인 도구입니다. 선형(linear), 원형(radial), 원뿔형(conic) 세 가지 타입을 지원하며, 색상, 각도, 위치를 자유롭게 조절하여 원하는 배경 효과를 만들 수 있습니다. 생성된 CSS 코드를 복사하여 웹사이트에 바로 적용할 수 있습니다.
📋 그라데이션 유형
| 유형 | 설명 | 활용 예 |
|---|---|---|
| 선형 (Linear) | 직선 방향 전환 | 버튼, 배너 배경 |
| 원형 (Radial) | 중심에서 바깥으로 | 스포트라이트, 하이라이트 |
| 원뿔형 (Conic) | 회전하며 색 전환 | 프로그레스 링, 색상환 |
💡 그라데이션 디자인 팁
- 인접 색상: 색상환에서 가까운 색상끼리 자연스러운 전환
- 명도 대비: 밝은 색 → 어두운 색으로 깊이감 표현
- 중간 색상: 3개 이상 색상으로 풍부한 그라데이션
- 위치 조절: 색상 위치(%)를 조절하여 전환 속도 제어
- 각도 활용: 45°, 135° 등 대각선 그라데이션으로 역동적 효과
자주 묻는 질문
그라데이션에 색상은 몇 개까지 추가할 수 있나요?▼
CSS 그라데이션에는 제한이 없지만, 보통 2~4개가 자연스럽습니다. 너무 많으면 복잡해 보일 수 있습니다.
그라데이션 배경이 구형 브라우저에서 안 보이면?▼
CSS에 fallback 배경색을 먼저 선언하세요. 예: background: #3b82f6; 다음 줄에 그라데이션 선언.
투명 그라데이션은 어떻게 만드나요?▼
색상 코드 대신 rgba() 또는 transparent를 사용하세요. 예: transparent → #3b82f6로 페이드인 효과.