CSS 원추형 그라데이션 생성기 파이 차트, 색상輪 및 스윕 효과를 위한 CSS 원추형 그라데이션을 생성합니다.

What Is 원추형 그라데이션 생성기?

코닉 그라디언트 생성기는 중심점을 기준으로 색상이 각도에 따라 전환되는 CSS 그라디언트를 만듭니다. 이는 선형적이나 방사형이 아닌 각도에 따라 색상이 변화합니다. 코ニック 그라디언트는 중심점 주위를 회전하므로 색상 차트, 파이 차트와 같은 세그먼트, 시계면, 그리고 매끄러운 색상 전환을 생성하는 데 적합합니다. 이 도구를 사용하면 세 가지 색상을 선택하고 시작 각도를 설정하며 중심점의 위치를 지정할 수 있습니다. 결과적인 CSS conic-gradient() 코드는 부드러운 각도 전환을 만들어내며 처음 색상으로 다시 연결됩니다. 코닉 그라디언트는 SVG 또는 Canvas가 필요 없도록 시각적 효과를 가능하게 하는 강력한 CSS 기능입니다.

Why Use 원추형 그라데이션 생성기?

• 선형/방사형 그라데이션이 불가능한 Sweeping Angular 색상 전환을 생성합니다
• 회전 제어를 위한 조정 가능한 시작 각도
• 오프센터 효과를 위한 사용자 지정 중심 위치
• 장식적인 배경과 데이터 시각화를 위해 완벽합니다
• 생산용으로 깨끗한 CSS 출력

Common Use Cases

색상環

원추형 그라데이션을 사용하여 무지개 색상环 배경을 생성하세요.

파이 차트

하드 색상 정지를 사용하여 단순한 CSS 전용 파이 차트를 구축하세요.

장식적인 배경

섹션과 카드에 대한 고유한 각형 그라데이션 배경을 생성하세요.

로딩 스피너

원추형 그라데이션 아크를 사용하여 CSS 전용 로딩 스피너를 설계하세요.

Technical Guide

CSS conic-gradient()는 중심점 주위를 따라 색상 전환이 일어납니다. 구문은 다음과 같습니다: conic-gradient(from angle at posX posY, color1, color2, ..., color1). "from" 각도는 시작 위치(기본값 0deg = 상단)를 회전합니다. 색상들은 명시적인 각도 정지가 지정되지 않는 한 360° 범위에 고르게 분포됩니다. 첫 번째 색상을 마지막으로 반복하면 무결점 루프가 생성됩니다. 파이 차트 효과를 위해 백분율 정지를 사용할 수 있습니다: conic-gradient(red 0% 25%, blue 25% 50%, green 50% 75%, yellow 75%). 코닉 그라디언트는 Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+에서 지원되며 border-radius: 50%와 함께 마스킹할 수 있고 mask-image와 결합하여 복잡한 모양을 만들 수 있습니다.

Tips & Best Practices

• 1
  무결점 원형 전환을 위해 첫 번째 색상을 마지막 정지로 반복하세요
• 2
  파이 차트 세그먼트를 위한 하드 정지(같은 百分比, 두 가지 색상) 사용
• 3
  원형 색상環 효과를 위한 border-radius: 50%와 결합
• 4
  전체 그라데이션을 회전시키는 "from" 각도 - 애니메이션 효과에 유용함
• 5
  복잡한 패턴을 위한 여러 원추형 그라데이션 레이어

Related Tools

색상 선택기

HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.

🎨 Color Tools

컬러 하모니 휠

다섯 가지의 조화 유형과 시각적 선택이 가능한 인터랙티브 컬러 휠입니다.

🎨 Color Tools

선형 그라데이션 생성기

사용자 지정 색상, 각도 및 색상 중지와 함께 CSS 선형 그라데이션을 만듭니다.

🎨 Color Tools

원형 그라데이션 생성기

사용자 지정 모양, 위치 및 색상을 가진 CSS 원형 그라데이션을 생성합니다.

🎨 Color Tools

CSS 필터 생성기

블러, 밝기, 대조 度 등과 같은 CSS 필터 효과를 시각적 제어로 적용합니다.

🎨 CSS & Design

Frequently Asked Questions

Q 원추형 그라데이션이 무엇인가?

원추형 그라데이션은 중심점 주위를 따라 색상이 전환되는 효과로, 시계 바늘과 같은 각형으로 움직입니다. 이는 선형(직선) 및 방사형(중심에서 밖으로) 그라데이션과 다릅니다.

Q 원추형 그라데이션을 사용하여 파이 차트를 생성할 수 있나요?

예! 파이 차트 세그먼트를 위한 하드 색상 정지(같은 百分比, 두 가지 색상)를 사용하세요. 예: conic-gradient(red 0% 30%, blue 30% 70%, green 70%).

Q 원추형 그라데이션이 잘 지원되나요?

크롬, 파이어폭스, 사파리 및 에지와 같은 모든 현대 브라우저에서 지원됩니다. 이는 CSS Images Level 4 기능으로 2020년부터 광범위하게 채택되었습니다.

About This Tool

원추형 그라데이션 생성기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.