Effects

clip-path

clip-path cuts an element down to a shape. Everything outside the circle, ellipse, rectangle or polygon becomes invisible.

Syntaxnone | <clip-source> | [ <basic-shape> || <geometry-box> ] …

none | <clip-source> | [ <basic-shape> || <geometry-box> ]

<basic-shape> = inset() | circle() | ellipse() | polygon()
  | path() | rect() | xywh() | shape()

Preview

Presets

Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Controls

<basic-shape>polygon()

insetcircleellipsepolygon

polygon()

Drag the numbered points to change the shape

Point 1

Horizontal

Vertical

Point 2

Horizontal

Vertical

Point 3

Horizontal

Vertical

About

Basic shapes

inset() is a rectangle inset from the top, right, bottom and left. Add round followed by a border-radius value to round its corners.
circle() is a circle with a radius and a center (after at). Without a radius it uses closest-side, the distance to the nearest edge.
ellipse() is an ellipse with horizontal and vertical radii.
polygon() lists its vertices as comma-separated “x y” pairs. % is relative to the element’s width and height. On this page you can drag the numbered points to reshape it.

Clipping does not change the box

The clipped-away area becomes invisible and stops receiving clicks, but the element keeps its size in the layout, so nothing around it moves. The preview shows the original box as a dashed outline. Outer box-shadow and outline get clipped too.

Watch out

A % radius in circle() is relative to the diagonal of the width and height divided by √2. The controls on this page only use lengths and keywords.
Write margin-box, content-box and so on after the shape to change which box the coordinates are measured from. The default is border-box.
Shapes of the same kind animate smoothly with transition. polygon() needs the same number of vertices on both ends.

References

MDN Web Docsclip-path SpecificationCSS Masking Module Level 1 Can I useclip-path