docs.rodeo

MDN Web Docs mirror

clip-path

{{CSSRef}} 

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

{{InteractiveExample("CSS Demo: clip-path")}} 

clip-path: circle(40%);

clip-path: ellipse(130px 140px at 10% 20%);

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");

clip-path: rect(5px 145px 160px 5px round 20%);

clip-path: xywh(0 5px 100% 75% round 15% 0);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/balloon-small.jpg"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

section {
  align-items: flex-start;
}

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

Syntax

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
clip-path: xywh(0 5px 100% 75% round 15% 0);

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

The clip-path property is specified as one or a combination of the values listed below.

Values

[!NOTE] A computed value other than none results in the creation of a new stacking context the same way that CSS {{cssxref("opacity")}}  does for values other than 1.

Formal definition

{{cssinfo}} 

Formal syntax

{{csssyntax}} 

Examples

Shapes and geometry boxes

In this example, two triangles are created by defining a polygon() as the clip path on {{htmlelement("div")}}  elements. Each one has a solid colored background and a thick {{cssxref("border")}} . The second <div> element has its reference box set to content-box:

HTML

<div></div>
<div></div>

CSS

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
}

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-color: rebeccapurple;
  border: 20px solid magenta;

  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

div:last-of-type {
  clip-path: content-box polygon(50% 0, 100% 100%, 0 100%);
}

Results

{{EmbedLiveSample("shapes1", "", "230")}} 

For the first triangle, we didn’t specify a reference box; it therefore defaults to border-box, with the 0% and 100% positions located on the outside edge of the border. In the second example, we set the <geometry-box> to content-box, meaning the reference box for the basic shape is the outer edge of the content area, which is inside the padding box. Because our example has no padding, this is the inner edge of the border.

shape() versus path() functions

Expanding on the previous example, we create the same triangle with different <basic-shape> values, demonstrating how the {{cssxref("basic-shape/shape", "shape()")}}  and {{cssxref("basic-shape/path", "path()")}}  functions can also be used to create clipping paths, with shape() being a more flexible solution.

We use path() to define the first element’s clipping path, and shape() for the second, both using the default border-box as their reference box:

div {
  clip-path: path("M100 0 L200 200 L0 200 Z");
}

div:last-of-type {
  clip-path: shape(from 50% 0, line to 100% 100%, line to 0 100%, close);
}

As a result, the path defined with the shape() function grows with the element, whereas the path() version does not:

{{EmbedLiveSample("shapes2", "", "230")}} 

Because the shape() function allows using {{cssxref("percentage")}}  values (and {{cssxref("--*", "custom properties")}}  too), it is more robust.

We’ll demonstrate this by increasing the size of the underlying element:

div {
  width: 250px;
  height: 250px;
}

{{EmbedLiveSample("shapes3", "", "280")}} 

The visibility, or at least partial visibility, of the four border sides in the clip path example defined by the shape() function is due to the percentage values allowing the path to grow with the element. In the path() version, the element grew, but not the shape. As a result, the top and left borders are partially visible while the right and bottom borders are clipped out.

SVG as clip source

In this example, we define SVG {{svgElement("clipPath")}}  elements to use as a clip-path source.

HTML

We include two {{htmlElement("div")}}  elements and an <svg> element containing two <clipPath> elements. One <clipPath> contains four {{svgElement("rect")}}  elements that together define window panes, leaving a cross of blank space in the middle, and the other contains two crossing <rect> elements.

<svg height="0" width="0">
  <defs>
    <clipPath id="window">
      <rect y="0" x="0" width="80" height="80" />
      <rect y="0" x="120" width="80" height="80" />
      <rect y="120" x="0" width="80" height="80" />
      <rect y="120" x="120" width="80" height="80" />
    </clipPath>
    <clipPath id="cross">
      <rect y="0" x="80" width="40" height="200" />
      <rect y="80" x="0" width="200" height="40" />
    </clipPath>
  </defs>
</svg>

<div class="window">Window</div>
<div class="cross">Cross</div>

CSS

We use flexbox to allow our elements to sit side-by-side with a gap between them, if there is space available. We define a {{cssxref("gradient/conic-gradient", "conic-gradient()")}}  background image on both <div> elements, providing an interesting visual to clip, along with a {{cssxref("border")}} .

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
  font: 2em sans-serif;
}

div {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(
    at center,
    rebeccapurple,
    green,
    lightblue,
    rebeccapurple
  );

  border: 5px solid;
  box-sizing: border-box;
}

We then set the id of the <clipPath> as the <clip-source>. We center the text in the cross example vertically using {{cssxref("align-content")}} , as otherwise the text would be clipped, as is happening in the window example.

.window {
  clip-path: url(#window);
}

.cross {
  clip-path: url(#cross);
  align-content: center;
}

Results

{{EmbedLiveSample("SVG as clip source", "", "230")}} 

The elements, including their border and text, are clipped, with only the parts overlapping the <clipPath> elements being drawn to the page.

The various value types

This example demonstrates the various values of the clip-path property clipping an HTML {{htmlelement("img")}} .

HTML

The HTML includes an <img> that will be clipped, a star-shaped <clipPath>, and a {{htmlelement("select")}}  element to choose a clip-path property value from.

<img id="clipped"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<svg height="0" width="0">
  <defs>
    <clipPath id="star">
      <path d="M100,0 42,180 196,70 4,70 158,180z">
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#star)" selected>star</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="rect(20px 150px 200px 20px round 10%)">rect</option>
  <option value="xywh(0 20% 90% 67% round 0 0 5% 5px)">xywh</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>

<pre id="log"></pre>

CSS

The initial rendering includes the star as the clip-path source.

#clipped {
  margin-bottom: 20px;
  clip-path: url(#star);
}

JavaScript

When you select a new option from the <select> menu, an event handler updates the value of the clip-path set on the <img>.

const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", (evt) => {
  const path = evt.target.value;
  document.getElementById("clipped").style.clipPath = path;
  log(`clip-path: ${path};`);
});

function log(text) {
  const logElement = document.querySelector("#log");
  logElement.innerText = `${text}`;
  logElement.scrollTop = logElement.scrollHeight;
}

Result

{{EmbedLiveSample("Complete_example", 230, 300)}} 

Select different options to change the clip-path value.

[!NOTE] While it is possible to define a path of text, if you want to clip a background image to text rather than a shape, see the {{cssxref("background-clip")}}  property.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN