2nd/10_Wiki/Topic_CSS/CSS_Gradients_Conic.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-conic-gradients	CSS Conic Gradients	Frontend	draft	conceptual		conic-gradient CSS conic gradient repeating-conic-gradient pie chart CSS color wheel gradient		B	0.9	2026-06-23	2026-06-23			css web frontend w3schools gradients conic-gradient background-image	https://www.w3schools.com/css/css3_gradients_conic.asp

CSS Conic Gradients

🎯 한 줄 통찰 (One-line insight)

A conic gradient (conic-gradient()) rotates its color transitions around a center point (rather than radiating outward), making it the natural tool for pie charts and color wheels; it needs at least two colors and is applied through background-image. [S1]

🧠 핵심 개념 (Core concepts)

• Conic = rotated around a center — a conic gradient is a gradient with color transitions rotated around a center point. [S1]
• At least two colors — to create a conic gradient you must define at least two colors. [S1]
• Defaults — the default starting angle is 0deg and the default position is center; colors are spread equally if no degree is specified. [S1]
• Optional angle (from) and position (at) — you can specify a starting angle with from and a center position with at. [S1]
• Pie charts — combining a conic gradient with border-radius: 50% turns the box into a pie chart. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Equal-spread pattern — conic-gradient(color1, color2, ...) spreads colors equally around the circle. [S1]
• Degree-stop pattern — append degrees (red 45deg) to control where each color band sits. [S1]
• Pie-chart pattern — conic gradient + border-radius: 50%. [S1]
• from/at pattern — set starting angle and center: conic-gradient(from 90deg, ...), conic-gradient(at 60% 45%, ...). [S1]
• Repeating pattern — repeating-conic-gradient() tiles a defined color sequence. [S1]

📖 세부 내용 (Details)

Syntax [S1]

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

The default angle is 0deg, the default position is center, and colors are spread equally if no degree is specified.

Three colors (equal spread) [S1]

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Five colors [S1]

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Three colors with degrees [S1]

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Create a Pie Chart (basic) [S1] Add border-radius: 50% to make the conic gradient look like a pie chart:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Create a Pie Chart with defined degrees [S1]

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}

Conic Gradient with specified starting angle (from) [S1]

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

Conic Gradient with specified center position (at) [S1]

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

Repeating a Conic Gradient (basic) [S1] The repeating-conic-gradient() function is used to repeat conic gradients:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

Repeating Conic Gradient with color stops [S1]

#grad {
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}

CSS Gradient Functions reference table [S1]

Function	Purpose
conic-gradient()	Conic gradient around a center point
linear-gradient()	Linear gradient top-to-bottom
radial-gradient()	Radial gradient center-to-edges
repeating-conic-gradient()	Repeated conic pattern
repeating-linear-gradient()	Repeated linear pattern
repeating-radial-gradient()	Repeated radial pattern

🛠️ 적용 사례 (Applied in summary)

The page's own demonstrations (the #grad element showing equal-spread, degree stops, pie charts, from/at, and repeating conic gradients) serve as the applied examples. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Basic conic gradient (language: CSS):

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Pie chart:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Repeating conic gradient:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• Conic vs radial — both are defined relative to a center, but a radial gradient radiates color outward from the center while a conic gradient rotates colors around the center; conic is the choice for pie charts and color wheels. [S1]
• Equal spread vs degree stops — omit degrees to spread colors equally; supply degrees (red 45deg) to place exact bands, as required for a defined pie chart. [S1]
• Single vs repeating — use repeating-conic-gradient() for tiled patterns such as checkerboards/spokes. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.90
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Linear Gradients, CSS Radial Gradients, CSS Box Shadow
• 참조 맥락: Referenced whenever a rotated color transition (pie chart, color wheel) is needed via background-image.

📚 출처 (Sources)

• [S1] W3Schools — CSS Conic Gradients — https://www.w3schools.com/css/css3_gradients_conic.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Conic Gradients" page (Astra wiki-curation, P-Reinforce v3.1 format).