---
id: css-masking-with-gradients
title: "CSS Masking with Gradients"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["gradient mask", "linear-gradient mask", "radial-gradient mask", "conic-gradient mask", "mask-image gradient"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "masking", "gradients", "mask-image"]
raw_sources: ["https://www.w3schools.com/css/css3_masking_gradients.asp"]
applied_in: []
github_commit: ""
---

# [[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]
```css
.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]
```css
.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]
```css
.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]
```css
.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]
```css
.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):
```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).