🌀 conic-gradient 생성기 | CSS 코드 복사

그라디언트 함수

미리보기 모양

시작 각도 (from)

deg

중심 가로 위치 (at X)

중심 세로 위치 (at Y)

색 정지점 개수

1번 색 (HEX)

1번 색 위치

2번 색 (HEX)

2번 색 위치

3번 색 (HEX)

3번 색 위치

붙여 쓸 CSS

conic-gradient 한 가지만 다루는 생성기

conic-gradient 는 중심점을 축으로 색이 시계 방향으로 돌아가는 그라디언트입니다. 원형 차트, 색상환, 회전 테두리처럼 각도로 색을 나누는 화면에 씁니다. 시작 각도와 중심 좌표, 색 정지점 2~5개를 넣으면 함수 한 줄이 그대로 만들어지고, 미리보기를 사각형과 원형으로 바꿔 가며 확인할 수 있습니다.

출력하는 문법은 W3C CSS Images 규격의 conic-gradient 정의를 따르며, 각도는 deg, 중심과 정지점은 백분율로 씁니다. 반복 선택 시 함수 이름만 repeating-conic-gradient 로 바뀌고 나머지 인자 구조는 같습니다. 2026년 10월 기준 주요 브라우저가 접두사 없이 지원하므로 별도 접두사 줄은 넣지 않습니다.

이 도구는 conic-gradient 전용입니다. linear-gradient 와 radial-gradient 는 지원하지 않으며, 여러 배경을 겹치는 조합도 다루지 않습니다. 각각 심플우디의 다른 도구가 담당합니다. 보기 좋은 색 조합을 추천하지도 않으니 색과 각도는 직접 넣으세요.

자주 묻는 질문

linear-gradient 나 radial-gradient 도 만들 수 있나요?

이 도구는 conic-gradient 전용입니다. 선형과 원형 그라디언트는 심플우디의 별도 그라디언트 생성기가 담당하므로 여기서는 출력하지 않습니다.

원형 파이 차트처럼 경계를 또렷하게 만들려면 어떻게 하나요?

앞 정지점의 끝 위치와 다음 정지점의 시작 위치를 같은 값으로 두면 색이 섞이지 않고 선으로 갈립니다. 같은 값을 연달아 넣어 보세요.

정지점 위치를 뒤로 갈수록 작게 넣으면 어떻게 되나요?

CSS 는 앞 정지점보다 작은 값을 앞 값으로 끌어올려 보정합니다. 그 결과 의도하지 않은 하드 엣지가 생기므로 이 도구는 역순이 감지되면 결과에 알려 줍니다.

🌀CSS conic-gradient 코드 생성기

관련된 도구

CSS 그라디언트 생성기

CSS 호버 인터랙션 효과 코드 생성기

conic-gradient 한 가지만 다루는 생성기

자주 묻는 질문

관련된 도구

CSS 그라디언트 생성기

CSS 호버 인터랙션 효과 코드 생성기

conic-gradient 한 가지만 다루는 생성기

자주 묻는 질문

같은 카테고리 도구