CSS Clip Path

CSS Clip Path

The CSS clip-path property controls which parts of an element are visible by defining a clipping region. Content inside the region is displayed, while content outside the region is clipped from view.

Clip paths can create circles, ellipses, rectangles, polygons, and other custom shapes without permanently changing the original element or image.

How Clipping Works

A clipping path creates a boundary around the portion of an element that remains visible. Parts of the element outside that boundary are not painted.

.box {
  clip-path: circle(50%);
}

This clips the element into a circle. The element itself still occupies its original rectangular layout space even though only the circular portion is visible.

The initial value is none, which means no clipping path is applied.

.box {
  clip-path: none;
}

circle()

The circle() basic shape creates a circular clipping region.

.box {
  clip-path: circle(40%);
}

The radius can be specified using a length, percentage, or sizing keyword. The circle is centered by default.

The at keyword can specify the position of the circle's center.

.box {
  clip-path: circle(35% at 70% 50%);
}

This positions the center 70% across the reference box and 50% down it.

ellipse()

The ellipse() function creates an elliptical clipping region using horizontal and vertical radii.

.box {
  clip-path: ellipse(45% 30%);
}

The first radius controls the horizontal size of the ellipse and the second controls its vertical size.

As with circle(), the center can be positioned with at.

.box {
  clip-path: ellipse(40% 30% at 60% 50%);
}

inset()

The inset() function creates an inset rectangle by moving the clipping edges inward from the element's reference box.

.box {
  clip-path: inset(20px);
}

One to four inset values can be used in a pattern similar to margin and padding values.

.box {
  clip-path: inset(10% 20% 15% 5%);
}

The values represent the top, right, bottom, and left insets.

The optional round keyword can add rounded corners.

.box {
  clip-path: inset(10% round 20px);
}

polygon()

The polygon() function creates a custom shape from a series of coordinate pairs.

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

These three points create a triangle. Each coordinate pair defines one vertex of the polygon.

Adding additional points allows more complex shapes to be created.

.box {
  clip-path: polygon(
    50% 0%,
    100% 38%,
    82% 100%,
    18% 100%,
    0% 38%
  );
}

This five-point polygon creates a pentagon-like shape.

Positioning Basic Shapes

The circle() and ellipse() functions can use the at keyword to move their center point.

.box {
  clip-path: circle(30% at left center);
}

Positions can use keywords, percentages, or lengths.

.box {
  clip-path: circle(30% at 75% 25%);
}

Changing the center position makes it possible to reveal a particular area of an image or create an intentionally off-center shape.

Understanding Polygon Coordinates

Each point in a polygon() function contains an x-coordinate followed by a y-coordinate.

polygon(
  50% 0%,
  100% 100%,
  0% 100%
)

The first point is centered along the top edge. The second point is at the bottom-right corner, and the third is at the bottom-left corner.

Thinking of the element as a coordinate grid makes custom polygon shapes much easier to construct.

Clipping Images

The clip-path property can be applied directly to images.

img {
  clip-path: circle(45%);
}

The image remains rectangular for layout purposes, but only the portion inside the circle is painted.

More decorative image shapes can be created with polygons.

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

This clips the image into a diamond shape.

Clipping and Layout

Clipping changes what is visible, but it does not normally change the element's layout dimensions.

.box {
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
}

The element still occupies a 200 by 200 pixel box in normal layout even though its visible content is circular.

This distinction is important when positioning clipped elements or placing content around them. A clipping path is primarily a painting effect rather than a method for making surrounding content flow around the visible shape.

Clip Path Transitions

Compatible clip path shapes can be transitioned to create animated changes between clipping regions.

.box {
  clip-path: circle(30%);
  transition: clip-path 0.5s ease;
}
.box:hover {
  clip-path: circle(50%);
}

The visible circle gradually expands when the pointer moves over the element.

Polygon shapes can also transition when the starting and ending polygons use compatible point structures.

.box {
  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%
  );
  transition: clip-path 0.5s ease;
}
.box:hover {
  clip-path: polygon(
    50% 15%,
    85% 85%,
    15% 85%
  );
}

Common Clip Path Values

The clip-path property also supports other clipping sources and newer shape syntax. Basic shape functions provide a straightforward starting point for most introductory clipping examples.

CSS Clip Path Example

The following example applies four different clipping shapes to identical boxes.

.circle {
  clip-path: circle(45%);
}
.ellipse {
  clip-path: ellipse(45% 30%);
}
.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Open the example in the editor and change the percentages and polygon coordinates. Small changes to the values can produce very different shapes, making clip-path especially useful for experimenting with decorative designs.