2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Gradients_Linear.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-linear-gradients	CSS Linear Gradients	Frontend	draft	conceptual		linear-gradient CSS gradients repeating-linear-gradient gradient background CSS color transitions		B	0.9	2026-06-23	2026-06-23			css web frontend w3schools gradients linear-gradient background-image	https://www.w3schools.com/css/css3_gradients.asp

CSS Linear Gradients

🎯 한 줄 통찰 (One-line insight)

CSS gradients let you display smooth transitions between two or more specified colors; a linear gradient (linear-gradient()) runs along a straight line whose direction you set with keywords or an angle, and it is applied through the background-image property. [S1]

🧠 핵심 개념 (Core concepts)

• Gradients = smooth color transitions — CSS gradients display smooth transitions between two or more specified colors. [S1]
• Three gradient types — CSS defines linear gradients (going straight in a line), radial gradients (defined by a center point), and conic gradients (rotated around a center point). [S1]
• Applied via background-image — gradient functions are used as the value of the background-image property. [S1]
• Linear gradient needs ≥ 2 color stops — you must define at least two color stops; the gradient transitions between them. [S1]
• Direction is optional — you can specify a direction (with keywords like to bottom/to right) or an angle; if omitted, the default is top to bottom. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Direction-keyword pattern — linear-gradient(to <direction>, color1, color2) to flow toward a side or corner. [S1]
• Angle pattern — linear-gradient(<deg>, color1, color2) for precise gradient angles. [S1]
• Multi-stop pattern — list more than two colors to create banded/rainbow transitions. [S1]
• Transparency pattern — use rgba() colors whose alpha varies to fade a gradient in or out. [S1]
• Repeating pattern — repeating-linear-gradient() repeats a percentage-defined color sequence. [S1]

📖 세부 내용 (Details)

Syntax [S1]

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

A linear gradient requires at least two color stops, and you may specify a direction or an angle.

Top to Bottom (this is default) [S1]

#grad {
  background-image: linear-gradient(to bottom, red, yellow);
}

Bottom to Top [S1]

#grad {
  background-image: linear-gradient(to top, red, yellow);
}

Left to Right [S1]

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

Diagonal (top-left to bottom-right) [S1]

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Using Angles [S1] If you want more control over the direction of the gradient, you can define an angle instead of the predefined directions. The angle is specified as an angle between a horizontal line and the gradient line. Reference values: 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom, 270deg = right to left.

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Using Multiple Color Stops [S1]

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

Rainbow example:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Using Transparency [S1] CSS gradients also support transparency, which can be used to create fading effects. To add transparency, use the rgba() function to define the color stops. The last parameter in the rgba() function is the alpha value, defining the opacity: 0 indicates full transparency, 1 indicates full color (no transparency).

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Repeating a linear-gradient [S1] The repeating-linear-gradient() function is used to repeat linear gradients.

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

🛠️ 적용 사례 (Applied in summary)

The page's own demonstrations (the #grad element styled with each direction, angle, multi-stop, transparency, and repeating example) serve as the applied examples. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Linear gradient with a direction keyword (language: CSS):

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

Linear gradient by angle:

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Repeating linear gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

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

• Direction keyword vs angle — keywords (to bottom, to right, to bottom right) cover the common axes and corners; an explicit angle (0deg/90deg/180deg/270deg) gives more precise control over the gradient direction. [S1]
• Single gradient vs repeating — use linear-gradient() for a one-time transition across the box; use repeating-linear-gradient() when the percentage-defined color sequence should tile/repeat. [S1]
• Solid color stops vs rgba() — use rgba() color stops when a fading (transparency) effect is desired rather than an opaque transition. [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 Radial Gradients, CSS Conic Gradients, CSS Box Shadow
• 참조 맥락: Referenced whenever a smooth, direction-based color background is needed via background-image.

📚 출처 (Sources)

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

📝 변경 이력 (Change history)

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