2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Masking_Gradients.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-masking-with-gradients	CSS Masking with Gradients	Frontend	draft	conceptual		gradient mask linear-gradient mask radial-gradient mask conic-gradient mask mask-image gradient		B	0.87	2026-06-23	2026-06-23			css web frontend w3schools masking gradients mask-image	https://www.w3schools.com/css/css3_masking_gradients.asp

CSS Masking with Gradients

🎯 한 줄 통찰 (One-line insight)

A CSS gradient can be used as a mask layer image, letting mask-image fade or shape an element using linear, radial, or conic gradients. [S1]

🧠 핵심 개념 (Core concepts)

• Gradient as mask — mask-image can take a CSS gradient as its mask layer. [S1]
• Gradient types — the page demonstrates linear, radial (circle and ellipse), and conic gradient masks. [S1]
• Black vs transparent — in a gradient mask, the gradient's opaque (black) regions reveal the element and transparent regions hide it. [S1]
• -webkit- prefix — examples pair mask-image with -webkit-mask-image. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Fade-out mask — linear-gradient(black, transparent) fades an element from fully visible to hidden. [S1]
• Soft vignette / spotlight — radial-gradient(circle, black 50%, rgba(0,0,0,0.5) 50%) reveals a central region fully and partially dims the rest. [S1]
• Rotational mask — conic-gradient(black 0deg, transparent 360deg) sweeps visibility around a center. [S1]

📖 세부 내용 (Details)

Linear gradient mask layer [S1]

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

A second linear-gradient example applies the mask over a background image. [S1]

.mask1 {
  max-width: 600px;
  height: 400px;
  background: url(img_5terre.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Radial gradient mask layer — circle [S1]

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Radial gradient mask layer — ellipse [S1]

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Conic gradient mask layer [S1]

.mask3 {
  -webkit-mask-image: conic-gradient(black 0deg, transparent 360deg);
  mask-image: conic-gradient(black 0deg, transparent 360deg);
}

CSS masking properties reference [S1]

Property	Description
mask-clip	Specifies which area is affected by a mask image
mask-composite	Specifies a compositing operation used on the current mask layer with the mask layers below it
mask-image	Specifies an image to be used as a mask layer for an element
mask-mode	Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask
mask-origin	Specifies the origin position of a mask layer image
mask-position	Sets the starting position of a mask layer image
mask-repeat	Specifies how the mask layer image is repeated
mask-size	Specifies the size of a mask layer image
mask-type	Specifies whether an SVG element is treated as a luminance mask or as an alpha mask

🛠️ 적용 사례 (Applied in summary)

The page's own examples are the applied cases: linear, radial (circle/ellipse), and conic gradients applied as mask layers (including one over the img_5terre.jpg background). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Fade an element out with a linear gradient mask (language: CSS):

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

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

• Linear gradient — for directional fades (top-to-bottom, left-to-right). [S1]
• Radial gradient (circle / ellipse) — for a centered spotlight or vignette effect. [S1]
• Conic gradient — for a rotational/angular reveal around a center point. [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.87
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Masking PNG, CSS Masking SVG, CSS Gradients
• 참조 맥락: Referenced when fading or shaping an element's visibility using a gradient-based mask layer.

📚 출처 (Sources)

• [S1] W3Schools — CSS Masking with Gradients — https://www.w3schools.com/css/css3_masking_gradients.asp

📝 변경 이력 (Change history)

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