CSS Conic Gradient 빌더

Conic Gradient 빌더 사용법

1. 시작 각도와 중심 위치를 슬라이더로 조정합니다.
2. 색상 stop을 추가해 원하는 색을 배치합니다.
3. 모양(원형/정사각/직사각형)을 선택합니다.
4. CSS 코드를 복사해 본인 프로젝트에 붙여넣습니다.
5. 프리셋으로 빠르게 시작할 수도 있습니다.

주요 기능

• 시작 각도 0~360° + 중심점 X·Y 자유 조정
• 색상 stop 추가/삭제/색상·각도 개별 조정
• 4가지 프리셋 (파이·시계·무지개·로더)
• 원형·정사각·직사각형 출력
• CSS 코드 + 미리보기 실시간 연동

활용 예시

• 파이 / 도넛 차트 — Chart.js 없이 순수 CSS로
• 시계 다이얼 — 12시간 분할 시계 디자인
• 프로그레스 링 — 100% 도넛 진행률
• 각도 hover 효과 — 배경이 회전하는 인터랙션
• 무지개 / 색상환 — 디자인 컬러 휠

Conic-gradient가 뭔가요?

Conic gradient는 중심점을 기준으로 각도를 따라 색이 회전하는 그라데이션입니다. linear-gradient(선형)·radial-gradient(원형)에 이은 세 번째 종류로, CSS Image Module Level 4로 표준화되었습니다. Chrome 69+, Safari 12.1+, Firefox 83+에서 지원되며, 파이차트나 시계 같은 회전형 그래픽을 자바스크립트나 SVG 없이 순수 CSS만으로 만들 수 있어 매우 가볍습니다. from {angle}으로 시작 각도, at {x} {y}로 중심점을 지정할 수 있습니다.

자주 묻는 질문