CSS Clip-path Generator

Understanding CSS clip-path

Shape Types

• Polygon: Custom shapes with any number of vertices. Define points as percentages (0-100%).
• Circle: Perfect circles defined by center position and radius.
• Ellipse: Oval shapes with independent horizontal and vertical radii.
• Inset: Rectangle with optional rounded corners. Define offset from each edge.

Browser Support

• All modern browsers support clip-path (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+)
• For older browsers, consider fallback with overflow: hidden and border-radius
• CSS Shapes Level 1 specification defines the standard

Animation Tips

• Polygons animate smoothly when they have the same number of vertices
• Use CSS transitions: transition: clip-path 0.3s ease;
• For different vertex counts, consider JavaScript interpolation

Common Use Cases

• Image cropping without changing the image file
• Creative text masking and typography effects
• Hover/tap interactions on cards and buttons
• Non-rectangular layouts and hero sections
• Progress indicators and loading animations

Using in CSS

.element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  /* or */
  clip-path: circle(50% at 50% 50%);
  /* or */
  clip-path: ellipse(50% 30% at 50% 50%);
  /* or */
  clip-path: inset(10% 10% 10% 10% round 20%);
}