clip-path & mask

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.

Steckbrief clip-path

Syntax: clip-path: <form> | url(<svg-clip-pfad>) | none
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 10
Beispiele: 5
Browser: 4 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

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

10 Werte

clip-path-Formen

Wert	Beschreibung	Beispiel
`none`	Kein Clipping. (Standard)	clip-path: none;
`circle(radius at x y)`	Kreisförmiger Ausschnitt. Radius in Längen oder Prozent.	clip-path: circle(50% at 50% 50%);
`ellipse(rx ry at x y)`	Ellipsenförmiger Ausschnitt mit zwei Radien.	clip-path: ellipse(40% 60% at 50% 50%);
`inset(top right bottom left round radius)`	Rechteckiger Ausschnitt mit optionalen runden Ecken.	clip-path: inset(10% 20% 10% 20% round 10px);
`polygon(x1 y1, x2 y2, ...)`	Freies Polygon aus beliebig vielen Punkten.	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
`url(#svg-clip)`	Referenz auf ein SVG-clipPath-Element für komplexe Formen.	clip-path: url(#myClipPath);

mask-Properties

Wert	Beschreibung	Beispiel
`mask-image`	Bild oder Gradient als Maske. Schwarze Bereiche = sichtbar, transparent = versteckt.	mask-image: linear-gradient(to bottom, black, transparent);
`mask-size`	Größe der Maske (wie background-size).	mask-size: cover;
`mask-position`	Position der Maske (wie background-position).	mask-position: center;
`mask-repeat`	Wiederholung der Maske (wie background-repeat).	mask-repeat: no-repeat;

Beispiele

5 Beispiele

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

Grundformen mit clip-path

.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>

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

Polygon-Shapes

.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>

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

Hover-Morph-Effekt

.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>

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

Diagonale Sektionen

.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-image mit einem Gradient erzeugt weiche Ausblendungen, die mit clip-path nicht möglich sind.

Gradient-Masks

/* 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

5 Punkte

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

4 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Teilweise

mask benötigt -webkit- Prefix
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

clip-path grundlegend, mask eingeschränkt
Gmail

Keine

clip-path und mask werden entfernt
Outlook

Keine

Kein Support
Thunderbird

Teilweise

Grundlegende clip-path Unterstützung
Yahoo Mail

Keine

Kein Support

Steckbrief clip-path

Syntax: clip-path: <form> | url(<svg-clip-pfad>) | none
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 10
Beispiele: 5
Browser: 4 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

border-radius filter overflow

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da