CSS Clip Path Generator

How to Use the CSS Clip Path Generator

1. Choose a shape type.
2. Start from a preset or a custom polygon.
3. Drag points or edit X/Y values.
4. Preview the clipping result.
5. Switch background or upload a local preview image.
6. Copy CSS, Tailwind, or React code.
7. Paste the generated declaration into your project.

CSS Clip-Path Syntax Explained

MDN documents clip-path as a CSS property that defines a clipping region. This generator writes the basic-shape functions:

• clip-path: polygon(x1 y1, x2 y2, x3 y3);
• clip-path: circle(radius at x y);
• clip-path: ellipse(rx ry at x y);
• clip-path: inset(top right bottom left round radius);

Polygon coordinates are relative to the element’s reference box. 0% 0% is top-left, 100% 100% is bottom-right, 50% 50% is center.

Polygon, Circle, Ellipse, and Inset

Use polygon for custom edges. Use circle or ellipse for avatars and ovals. Use inset when you want a rectangular crop with an optional round radius—closer to a padded crop than a freeform silhouette.

CSS Clip-Path Polygon Coordinates

List points in order around the shape. A triangle is three pairs; a diamond is four. Too many points make dragging harder and can self-intersect. This editor keeps values in the 0–100% range.

Common CSS Clip-Path Shapes

CSS Clip-Path Use Cases

• Hero section dividers and diagonal banners
• Image masks and hexagon profile photos
• Polygon cards, arrow buttons, and badges
• Speech bubbles and decorative tickets
• CSS reveals that stay on one element

For a clipped card with elevation, pair the shape with the Box Shadow Generator. If you only need rounded rectangular corners, use the Border Radius Generator instead.

How to Create Responsive Clip-Path Shapes

Percentage-based polygon coordinates scale with the element. A hero cut such as polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%) stays a diagonal on every width. That is why this generator stays on percentages. path() is not treated as the same responsive model.

Clip-Path vs Border-Radius

border-radius rounds the corners of a rectangle. clip-path cuts a non-rectangular region. A circular avatar can be either border-radius: 50% on a square or circle()—but a hexagon or arrow needs clip-path.

CSS Clip-Path vs SVG Clip Paths

CSS clip-path is convenient on HTML elements. SVG <clipPath> is better for complex vector masks and reusable definitions. This page can export an SVG polygon for polygon() only—it is not a full SVG path editor.

Does Clip-Path Need -webkit-clip-path?

Current Chrome, Edge, Firefox, and Safari implement the standard clip-path property. The export still writes -webkit-clip-path next to it for older WebKit contexts. Check MDN for the live support table rather than treating the prefix as required everywhere.

Common CSS Clip-Path Mistakes

1. Reversing X and Y.
2. Forgetting 0% 0% is the top-left.
3. Using more polygon points than you can edit cleanly.
4. Creating a self-intersecting star by accident.
5. Mixing percentages with fixed px mid-shape.
6. Expecting clip-path to shrink layout size.
7. Animating polygon to circle and hoping they morph.
8. Treating path() like percentage polygon coordinates.
9. Shipping only a prefix, or only the standard property, without checking your browser set.
10. Using clip-path when border-radius or a simple gradient would do.

Frequently Asked Questions