How to Use the CSS Clip Path Generator

Click any shape preset button in the left panel to immediately apply that clip-path to the preview element. The gradient-colored preview box shows exactly how the shape will clip your element. The code panel updates with the corresponding clip-path CSS value. Copy the value or full rule with a single click, then paste it into your stylesheet.

clip-path Shapes Explained

The CSS clip-path property accepts several shape functions. polygon() defines a shape by a list of x/y coordinate pairs and is the most flexible — it can describe any closed polygon. circle() clips to a circle defined by radius and center point. ellipse() clips to an ellipse with separate horizontal and vertical radii. inset() clips to a rectangle with optional rounded corners, similar to border-radius.

All coordinates in polygon() and the position values in circle() and ellipse() are specified as percentages relative to the element's bounding box, or as lengths. Percentage coordinates make the shape responsive — it scales with the element automatically.

The polygon() Coordinate System

In the polygon() function, each point is given as x% y% where 0% 0% is the top-left corner, 100% 0% is the top-right, 100% 100% is the bottom-right, and 0% 100% is the bottom-left. Points are connected in order and the shape is automatically closed. To create a triangle pointing upward, you need three points: the apex at the top center, the bottom-left corner, and the bottom-right corner: polygon(50% 0%, 0% 100%, 100% 100%).

Animating clip-path

CSS clip-path is animatable when transitioning between two polygon() values with the same number of points. The browser interpolates each coordinate independently, morphing the shape smoothly. This enables creative reveal animations, shape-shifting hover effects, and scrolling section dividers:

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

Browser Support

clip-path with shape functions is supported in all modern browsers. For older browser compatibility, add the -webkit-clip-path vendor prefix alongside the standard property — this is required for Safari versions below 13.1 (though all current Safari versions support the unprefixed form).

Practical Examples

Diagonal Section Divider

.hero-section {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  padding-bottom: 80px;
}

Hexagonal Avatar

.hex-avatar {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 80px;
  height: 80px;
}

Star Badge

.star-badge {
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background: gold;
  width: 60px;
  height: 60px;
}