CSS 그라데이션 생성기로 선형, 방사형, 원뿔형 그라데이션을 실시간으로 디자인하세요. 색상 정지점, 각도, 위치를 조정한 뒤 바로 쓸 수 있는 CSS를 복사합니다.
기능
- 그라데이션 3종: 선형(방향성), 방사형(중심에서 바깥으로), 원뿔형(회전형 — 원형 차트와 색상환에 좋음).
- 각도 조절: 선형과 원뿔형에서 슬라이더나 정확한 숫자 입력으로 0–360°를 설정하며, 회전 버튼은 클릭할 때마다 45°씩 늘어납니다.
- 색상 정지점: 각 정지점에 독립적인 색상 선택기와 위치 슬라이더(0–100%)가 있습니다. 최소 2개이며 원하는 만큼 추가하세요.
- Sunset, Ocean, Aurora, Conic Pride를 포함한 엄선된 프리셋 10종 — 클릭해 시작점으로 불러오세요.
- 실시간 큰 미리보기: 192px 미리보기 패널과 얇은 그라데이션 막대가 편집하는 즉시 갱신됩니다.
- 한 번에 CSS 복사: 모든 스타일시트나 style 속성에 붙여넣을 수 있는 완전한 background: gradient(...); CSS를 얻습니다.
사용 방법
- 그라데이션 유형을 고르고 색상 정지점과 각도를 설정하거나 프리셋에서 시작하세요.
- 미리보기를 확인하고 필요에 따라 색상 정지점을 추가하거나 제거하세요.
- 생성된 CSS를 복사하세요.
