clip-path & mask

Zuletzt aktualisiert am 15. Februar 2026

clip-path schneidet ein Element in eine beliebige Form: alles außerhalb der Form wird unsichtbar. Du kannst Kreise, Ellipsen, Polygone oder sogar SVG-Pfade verwenden. mask geht einen Schritt weiter: statt scharfer Kanten erlaubt es Verläufe von sichtbar zu unsichtbar, indem es ein Bild oder einen Gradient als Transparenzmaske verwendet. Beide Properties sind animierbar, was spektakuläre Reveal-Effekte und Shape-Morphing ermöglicht.

Grundlagen

clip-path definiert einen sichtbaren Bereich: alles außerhalb wird abgeschnitten und ist nicht anklickbar. Anders als overflow: hidden (das nur rechteckig clippt) erlaubt clip-path beliebige Formen. Die Koordinaten beziehen sich standardmäßig auf die Border-Box des Elements.

mask funktioniert über Transparenz: schwarze Bereiche der Maske sind sichtbar, transparente Bereiche werden versteckt, und Grautöne erzeugen Teiltransparenz. Das macht mask mächtiger als clip-path, weil es weiche Übergänge ermöglicht. Als Maske kannst du Bilder, SVGs oder CSS-Gradienten verwenden.

Beide Properties erzeugen einen neuen Stacking-Context. clip-path ist performanter als mask, weil der Browser nur einen geometrischen Pfad berechnen muss statt eine komplette Transparenzmaske zu rendern. Für einfache Formen ist clip-path die bessere Wahl, für weiche Übergänge brauchst du mask.

Syntax & Werte

clip-path-Formen

mask-Properties

Beispiele

Grundformen

Die drei häufigsten clip-path-Formen: Kreis, Ellipse und Dreieck (Polygon).

.circle   { clip-path: circle(50% at 50% 50%); }
.ellipse  { clip-path: ellipse(50% 40% at 50% 50%); }
.triangle { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }

<div class="shapes-demo">
<div class="shape-wrap">
  <div class="shape-box s-circle">Kreis</div>
  <div class="shape-label">circle()</div>
</div>
<div class="shape-wrap">
  <div class="shape-box s-ellipse">Ellipse</div>
  <div class="shape-label">ellipse()</div>
</div>
<div class="shape-wrap">
  <div class="shape-box s-triangle">Dreieck</div>
  <div class="shape-label">polygon()</div>
</div>
</div>

Polygon-Shapes

Mit polygon() erstellst du beliebige Formen. Jeder Punkt wird als Prozent- oder Pixel-Koordinate angegeben.

.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

.arrow {
  clip-path: polygon(
    0% 20%, 60% 20%, 60% 0%,
    100% 50%, 60% 100%, 60% 80%, 0% 80%
  );
}

.hexagon {
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
}

<div class="poly-demo">
<div class="poly-wrap">
  <div class="poly-box p-star">Stern</div>
  <div class="poly-label">10 Punkte</div>
</div>
<div class="poly-wrap">
  <div class="poly-box p-arrow">Pfeil</div>
  <div class="poly-label">7 Punkte</div>
</div>
<div class="poly-wrap">
  <div class="poly-box p-hexagon">Hexagon</div>
  <div class="poly-label">6 Punkte</div>
</div>
</div>

Hover-Morph-Effekt

clip-path ist animierbar, wenn die gleiche Funktion mit gleicher Punkt-Anzahl verwendet wird. So morphen Formen nahtlos ineinander.

.hexagon {
  clip-path: polygon(
    50% 0%, 100% 25%, 100% 75%,
    50% 100%, 0% 75%, 0% 25%
  );
  transition: clip-path 0.5s ease;
}

.hexagon:hover {
  clip-path: polygon(
    50% 5%, 95% 20%, 95% 80%,
    50% 95%, 5% 80%, 5% 20%
  );
}

<div class="morph-demo">
<div class="morph-box">Morph Hex</div>
<div class="morph-circle">Morph Circle</div>
</div>

Diagonal-Sections

clip-path auf Sektionen erzeugt schräge Trennlinien für moderne Page-Layouts.

.section-1 {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.section-2 {
  margin-top: -20px;
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
}

.section-3 {
  margin-top: -20px;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

<div class="diagonal-demo">
<div class="diag-section diag-1">
  <h4>Sektion 1</h4>
  <p>Schräge Unterkante</p>
</div>
<div class="diag-section diag-2">
  <h4>Sektion 2</h4>
  <p>Schräge Ober- und Unterkante</p>
</div>
<div class="diag-section diag-3">
  <h4>Sektion 3</h4>
  <p>Schräge Oberkante</p>
</div>
</div>

Mask mit Gradient

mask-image mit einem Gradient erzeugt weiche Ausblendungen, die mit clip-path nicht möglich sind.

/* Unten ausblenden */
.fade-bottom {
  mask-image: linear-gradient(
    to bottom, black 50%, transparent 100%
  );
}

/* Seiten ausblenden */
.fade-sides {
  mask-image: linear-gradient(
    to right, transparent, black 20%, black 80%, transparent
  );
}

/* Radiale Maske */
.radial {
  mask-image: radial-gradient(
    circle, black 40%, transparent 70%
  );
}

<div class="mask-demo">
<div class="mask-wrap m-fade-bottom">
  <div class="mask-box">Fade unten</div>
  <div class="mask-label">linear to bottom</div>
</div>
<div class="mask-wrap m-fade-sides">
  <div class="mask-box">Fade Seiten</div>
  <div class="mask-label">linear to right</div>
</div>
<div class="mask-wrap m-radial">
  <div class="mask-box">Radial</div>
  <div class="mask-label">radial-gradient</div>
</div>
</div>

Barrierefreiheit

Geclippte oder maskierte Bereiche sind visuell unsichtbar, bleiben aber im DOM und für Screenreader vorhanden. Das ist normalerweise kein Problem, kann aber verwirrend sein, wenn wichtige interaktive Elemente (Links, Buttons) visuell abgeschnitten werden: Screenreader-Nutzer können sie erreichen, aber sehende Nutzer nicht.

Abgeschnittene Bereiche sind nicht anklickbar. Wenn ein Button teilweise von clip-path abgeschnitten wird, ist der abgeschnittene Teil nicht mehr interaktiv. Achte darauf, dass interaktive Elemente vollständig innerhalb des sichtbaren Bereichs liegen.

Für animierte clip-path-Übergänge gilt dasselbe wie für alle Animationen. Respektiere prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .morph-element {
    transition: none;
  }
}

Häufige Fehler

• clip-path-Animationen mit unterschiedlicher Punkt-Anzahl. polygon() kann nur animiert werden, wenn Start- und Endform die gleiche Anzahl an Punkten haben. Von einem Dreieck (3 Punkte) zu einem Quadrat (4 Punkte) geht nicht flüssig.
• mask-image ohne -webkit- Prefix verwenden. Safari braucht immer noch -webkit-mask-image. Setze immer beide Varianten.
• Vergessen, dass clip-path den gesamten Overflow abschneidet. Schatten, Outlines und Pseudo-Elemente außerhalb des Clip-Pfads werden unsichtbar.
• Komplexe SVG-Clippath-Referenzen nutzen, wenn polygon() ausreicht. SVG-Clippaths sind schwerer zu warten und debuggen als reine CSS-Formen.
• clip-path: inset() vergessen, wenn du ein einfaches Rechteck mit runden Ecken brauchst. Viele nutzen polygon() für etwas, das mit inset(0 round 10px) einfacher geht.

Browser-Kompatibilität

clip-path mit Grundformen (circle, ellipse, polygon, inset) wird von allen modernen Browsern unterstützt. mask benötigt in Safari noch den -webkit- Prefix.

Email-Kompatibilität

clip-path und mask werden in HTML-Emails nicht unterstützt.

Verwandte Eigenschaften