CSS clip-path Syntax Reference

The clip-path property accepts several shape functions. Here are the most common ones with copy-paste examples:

polygon()

Define a shape with any number of points using percentage or pixel coordinates:

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

/* Chevron / Arrow */
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

/* Diagonal cut */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);

circle() and ellipse()

/* Circle: radius at center-x center-y */
clip-path: circle(50% at 50% 50%);

/* Ellipse: radius-x radius-y at center-x center-y */
clip-path: ellipse(40% 60% at 50% 50%);

inset()

Clip inward from each edge, optionally with border-radius:

/* inset(top right bottom left round border-radius) */
clip-path: inset(10% 20% 10% 20% round 16px);

Common Shapes Cheat Sheet

Shape	CSS
Triangle	`polygon(50% 0%, 0% 100%, 100% 100%)`
Pentagon	`polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)`
Hexagon	`polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)`
Star	`polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)`
Diagonal	`polygon(0 0, 100% 0, 100% 80%, 0 100%)`

Browser Support

clip-path with polygon(), circle(), ellipse(), and inset() is supported in all modern browsers (Chrome 55+, Firefox 54+, Safari 13.1+, Edge 79+). For older browsers, include a fallback:

.hero {
  /* Fallback: element remains rectangular */
  overflow: hidden;
  border-radius: 0 0 50% 50%;

  /* Modern browsers */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

Practical Examples

Use clip-path to create a diagonal section divider:

.section-divider {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 4rem 2rem 6rem;
}

/* Animate clip-path on hover */
.card-image {
  clip-path: circle(70% at 50% 50%);
  transition: clip-path 0.3s ease;
}
.card-image:hover {
  clip-path: circle(100% at 50% 50%);
}

Read the full guide: Mastering CSS Clip-Path | Other tools: Gradient Studio, Font Studio, URL Encoder

Clip Path Studio

CSS Output

Shape Presets

Demo Size

Background

About Clip Paths