# CSS masking (mask, mask-image, mask-composite) unprefixed

Status: Baseline 2023 (Chrome 120, Safari 15.4, Firefox 53); breit verfügbar.  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/mask  
Seite: https://designforai.dev/de/css/masking

Unpräfixiertes `mask` lässt dich jedes Element mit Verläufen oder Bildern ausblenden, beschneiden und formen; kombinierte Masken (`mask-composite`) erzeugen Ringe, Kerben und weiche Kanten ohne zusätzliches DOM.

## HTML

```html
<div class="fx-022" style="aspect-ratio:16/10;background:linear-gradient(135deg,#dbeaff,#ece0ff)"></div>
```

## CSS

```css
.fx-022 {
  width: 100%;
  max-width: 400px;
  display: block;
  border-radius: 12px;
    mask: linear-gradient(#000 60%,transparent),radial-gradient(circle at 85% 20%,transparent 40px,#000 41px);
    mask-composite: intersect
}
```

Fallback: Sehr altes WebKit braucht `-webkit-mask`; Evergreen-Browser kommen unpräfixiert klar.

## Prompt

Nutze unpräfixiertes `mask` / `mask-image` mit Verläufen für Fades und Ausschnitte (z. B. `mask: linear-gradient(#000 70%, transparent)` für einen Fade nach unten) und `mask-composite: intersect|exclude`, um Ebenen zu kombinieren. Bevorzuge Masken gegenüber Overlay-divs und Pseudo-Elementen für ausblendende Inhaltskanten und Scroll-Schatten-Effekte.