그라데이션 생성기
여러 색상 정지점으로 멋진 CSS 그라데이션을 생성하세요. 선형, 원형, 원뿔형 그라데이션 지원. 각도, 색상 커스터마이징 후 CSS 코드 내보내기.
0%
100%
CSS
background: linear-gradient(90deg, #667EEA 0%, #764BA2 100%);
최대 8개의 색상 정지점으로 아름다운 CSS 그라데이션을 만드세요. 모든 그라데이션은 로컬에서 생성되며 CSS는 모든 최신 브라우저와 호환됩니다.
사용 방법
- 1
그라데이션 유형 선택
선형(직선), 원형(중심에서 원형), 원뿔형(점 주위 스위핑) 그라데이션 스타일을 선택하세요.
- 2
색상과 위치 조정
색상 선택기를 클릭하여 각 색상을 변경하세요. 슬라이더로 각 색상이 나타나는 위치(0-100%)를 조정하세요.
- 3
각도 또는 방향 설정
선형 및 원뿔형 그라데이션의 경우, 각도 슬라이더(0-360°) 또는 빠른 프리셋 버튼을 사용하여 방향을 설정하세요.
- 4
CSS 코드 복사
'CSS 복사'를 클릭하여 전체 background 속성을 복사하세요. 스타일시트에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
- 몇 개의 색상을 추가할 수 있나요?
- 최대 8개의 색상 정지점을 추가할 수 있습니다. 각 정지점은 그라데이션을 따라 0%에서 100% 사이 어디에나 배치할 수 있습니다.
- 선형, 원형, 원뿔형 그라데이션의 차이점은?
- 선형 그라데이션은 어느 각도에서든 직선으로 흐릅니다. 원형 그라데이션은 중심점에서 원형으로 확장됩니다. 원뿔형 그라데이션은 색상환처럼 중심점 주위를 스위핑합니다.
- 생성된 CSS는 모든 브라우저에서 작동하나요?
- 네. 최신 CSS 그라데이션은 모든 현재 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. 2015년 이후 출시된 브라우저에는 벤더 프리픽스가 필요하지 않습니다.
- 투명한 색상을 사용할 수 있나요?
- 색상 선택기는 HEX 색상을 지원합니다. 투명도를 위해서는 복사 후 CSS를 수동으로 편집하여 rgba() 또는 hsla() 값을 사용할 수 있습니다.