The clip-path property is used to specify a basic shape (<basic-shape>) or reference an SVG path (<clipPath>) to be used as a clipping path on the element.

The element can be an HTML element or an SVG element. (See Syntax and Values sections.)

Concepts and Terminology

What is “clipping”?

Clipping is a graphical operation that allows you to fully or partially hide portions of an element. The portions of the element that are shown or hidden are determined by a clipping path.

Clipping Paths & Regions

A clipping path can be either a basic shape or a vector path. This path defines a region (in the absence of anti-aliasing) where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas. This region is known as the clipping region.

Conceptually, any parts of the element that lie outside of a clipping region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.

A clipping path is conceptually equivalent to a custom viewport for the element it applies to. Thus, it affects the rendering of an element. It does not affect the element’s inherent geometry. The boundaries of a clipped element must remain the same as if it were not clipped. The element will affect the flow around it as it normally would, and every other element on the page will still see and treat the element as if it were still rectangular, even if it’s clipped to a non-rectangular shape. If you want to change the way the content around the element flows and have it respond to the defined shape of the clip path, you can use the shape-outside property.

If the clipping region exceeds the bounds of the user agent’s document window, content may be clipped to that window by the native operating environment.

An element’s ancestors may also clip portions of their content (e.g., via their own clip or clip-path properties and/or if their overflow property is not visible). What is rendered is the cumulative intersection.

Clipping Regions and Pointer Events

The clip-path property should restrict the areas of the element that accept pointer events to the clip path it defines/references. Pointer events must not be dispatched on the clipped (non-visible) regions of a shape.
This means that the element should not respond to pointer events like hover or click events even if it is hovered or clicked outside its visible region.

Animating Clipping Paths

Clipping paths defined using basic shapes can be animated just like shapes defined for the shape-outside property can.

In short, a clipping path can be animated from one shape to another because it is made up of points. These points have coordinates that are either length or percentage values. And since lengths and percentages are animatable, shapes can be animated as well. So, basically, you’re animating the position of the points that make up a shape.

However, note that you can animate one shape into another only by using the same shape function for the initial and final shape, because the initial and final shape must have the same number of points, otherwise the animation is not possible.

For more information please see the shape-outside property entry.

Trivia & Notes

The deprecated clip Property

Before the clip-path property was introduced, in CSS 2.1, the clip property was used to clip parts of an element, similar to the way clip-path works.

However, the clip property was very limited: the only supported clipping shape was a rectangle shape created using the rect() function.

Moreover, clip only worked on absolutely-positioned element, which limites its use a lot. Even in SVG, it was limited to specific elements as well.

These reasons, among others, are why the clip-path property was added to the SVG specification and then adapted by the CSS Masking module today.

If you’re interested, you can read more about the clip property in its entry.

Using clip-path with CSS Shapes

The clip-path property is a great companion to the CSS Shapes properties, particularly the shape-outside property.

Using shape-outside you can change the way content flows around an element because the shape applied using shape-outside changes the geometry of the element’s float area. However, the shape does not change anything else about the element, like backgrounds and borders and such. This means that any borders and background images will not adapt to the shape created on the element. So, even though the element’s float area changes, the content around the element may end up being on top of the element’s background image.

In order “clip” the background of the element to match the defined shape, you can use the clip-path property. All you have to do is pass in the same shape function that you used in the shape-outside property to the clip-path property, and the element’s background image will then be clipped to the defined shape, resulting in a more defined shape altogether.

You can read more about CSS Shapes and using clip-path with them in the shape-outside property entry, and see the above demo live in the Examples section below.