Conic이 linear/radial과 어떻게 다른가?

Linear는 직선 따라 보간, radial은 한 점에서 바깥 원으로, conic은 원 주위로 보간(시계 면처럼). 그래디언트가 축 주위 스윕해야 할 때 conic 사용 — 파이/도넛 차트·컬러 휠·체커보드 패턴·로딩 스피너.

왜 같은 위치 스톱 2개?

부드러운 트랜지션 대신 하드 엣지 만듦. `red 0% 25%, blue 25% 50%`는 '0%~25%는 빨강, 즉시 25%~50%는 파랑' — 파이 차트 세그먼트·날카로운 체커보드 패턴에 완벽. 겹침 없으면 부드러운 블렌드.

Conic Gradient 생성기

색상

CSS conic gradient는 여전히 덜 쓰임 — 손으로 작성하기 어려운 게 일부 이유. 이 빌더는 ellipse·square·rectangle·pie 도형에 적용된 그래디언트 라이브 미리보기 제공, `from` 각도와 `at` 중심 위치 슬라이더 포함. 컬러 스톱 추가·제거, 위치 드래그, 시스템 컬러 피커로 컬러 선택. 5가지 프리셋 — 무지개·일몰·흑백·체커보드·3구간 링 차트 — 으로 시작 가능. 출력은 어떤 스타일시트에도 넣을 수 있는 plain CSS; 모든 모던 브라우저(Chromium 69+·Firefox 83+·Safari 12.1+)에서 작동.

—

From 각도: 0°

중심 X: 50%중심 Y: 50%

미리보기 도형

프리셋:

컬러 스톱

0.0%

25.0%

50.0%

75.0%

100.0%

CSS

background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);

모든 모던 브라우저(Chromium 69+·Firefox 83+·Safari 12.1+)에서 작동. 모든 값은 도와 퍼센트.

사용법

프리셋 선택 또는 기본 무지개에서 시작. 조정 시 미리보기 업데이트.
`from` 각도 슬라이드로 전체 그래디언트 회전. 중심 슬라이더로 conic 꼭짓점 중심 이탈.
하드 트랜지션 원하는 곳에 스톱 추가(같은 위치 2 스톱은 날카로운 엣지 만듦 — 파이 차트에 유용).

자주 묻는 질문

Conic이 linear/radial과 어떻게 다른가?: Linear는 직선 따라 보간, radial은 한 점에서 바깥 원으로, conic은 원 주위로 보간(시계 면처럼). 그래디언트가 축 주위 스윕해야 할 때 conic 사용 — 파이/도넛 차트·컬러 휠·체커보드 패턴·로딩 스피너.
왜 같은 위치 스톱 2개?: 부드러운 트랜지션 대신 하드 엣지 만듦. `red 0% 25%, blue 25% 50%`는 '0%~25%는 빨강, 즉시 25%~50%는 파랑' — 파이 차트 세그먼트·날카로운 체커보드 패턴에 완벽. 겹침 없으면 부드러운 블렌드.

Conic Gradient 생성기

사용법

자주 묻는 질문

관련 도구

색맹 시뮬레이터

CSS Box Shadow 생성기

컬러 포맷 변환기

CSS 그라디언트 생성기

컬러 팔레트 생성기

색상 대비 검사기