Developer

Clip Path Generator

Explore polygon, circle, ellipse, and inset clip-path presets with live previews.

Loading interactive tool…

Embed this tool on your site

About this tool

The clip-path property can turn an element into a circle, pentagon or diagonal section, but writing the coordinates by hand takes trial and error. The Clip Path Generator offers five presets — Circle (circle(42% at 50% 50%)), Ellipse, Inset with rounded corners, a five-point Polygon and a four-point Polygon Percentage shape — applied live to a colorful preview square. Tick Use custom polygon to type your own points as x% y% pairs separated by commas, such as 50% 0%, 100% 100%, 0% 100%; the preview and the CSS output update as you type. The output is a clip-path declaration ready to copy. There is no drag editor or radius control, so fine-tune circle, ellipse and inset values by editing the copied CSS. An invalid point list leaves the preview unchanged while the CSS box still shows it, so check the preview before copying.

Why use it

  • Five Ready Shapes: Circle, ellipse, inset with rounded corners and two polygons load with one selection, covering the basic shape functions.

  • Custom Polygons by Coordinates: Type any list of percentage points to build triangles, arrows, diagonal crops or other polygons.

  • Live Preview: The clipped preview square repaints as you change presets or type points, so mistakes show up immediately.

  • Percentage Units: Presets use percentages so the clipped shape scales with the element's size.

  • Copy-Ready CSS: The clip-path declaration works unprefixed in current Chrome, Firefox, Safari and Edge.

How to use

  1. Choose a Preset: Circle, Ellipse, Inset, Polygon or Polygon Percentage
  2. Check the shape on the preview square
  3. To draw your own shape, tick Use custom polygon and type points as x% y% pairs separated by commas
  4. Watch the preview update as you type; if it stops changing, a point is probably malformed
  5. Click Copy CSS to copy the clip-path declaration

When it helps

  • When building a hero section with a diagonal bottom edge that cuts across the background color
  • When creating triangular shape decorations or directional arrows as pure CSS without SVG files
  • When designing hexagonal image grids for portfolio or team section layouts
  • When clipping a card or image to a custom polygon for a branded, non-rectangular layout
  • When animating a shape reveal effect where an element clips in from one polygon to another
  • When making a badge or label in a chevron or arrow shape for navigation or status indicators

Examples

Polygon preset (pentagon)

Input
Preset: Polygon
Expected result
clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);

Circle preset

Input
Preset: Circle
Expected result
clip-path: circle(42% at 50% 50%);

Diagonal hero crop

Input
Use custom polygon: 0 0, 100% 0, 100% 85%, 0 100%
Expected result
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Tips

  • Keep the same number of polygon vertices in both states when you plan to animate the shape with a CSS transition or @keyframes
  • Use percentage units (the default) so the clipped shape scales proportionally as the element resizes — pixel values create a fixed cutout that breaks at different sizes
  • circle(50%) on a perfectly square element is equivalent to border-radius: 50% but works on non-box rendering contexts like transformed elements
  • Combine clip-path with a CSS transition on hover for reveal effects — a diagonal slide-in can be achieved by transitioning from clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) to a full rectangle
  • For complex illustrative shapes, draw them in Figma or Inkscape, export as SVG, extract the path d attribute, and use clip-path: path() with that string

Frequently Asked Questions

What is the difference between clip-path and mask?
clip-path defines a shape region and discards everything outside it, using geometric primitives or SVG paths. mask uses a separate image or gradient as an alpha or luminance channel to control visibility. clip-path is simpler and GPU-friendly; mask allows smooth gradual edges and bitmap-defined shapes.
Can I animate clip-path between two polygon shapes?
Yes, as long as both polygon shapes have the same number of vertices. CSS interpolates each vertex position separately. If vertex counts differ, the transition jumps rather than interpolates. Always match vertex counts when designing from/to animation pairs.
Why does my polygon need the same number of points to animate?
The browser animates clip-path by linearly interpolating each x/y coordinate pair. Without a 1-to-1 mapping of vertices, it has no way to decide which destination point each source point should travel toward, so it cannot interpolate and falls back to a hard swap.
How do I make a star shape with clip-path?
A five-pointed star needs ten polygon points alternating between outer and inner radius positions, for example 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%. Paste that list into the custom polygon field to preview it.
Does clip-path affect click events outside the shape?
Pointer events still fire within the original bounding box by default, not just the visible clipped area. To restrict clicks to the visible shape, add pointer-events: none to the parent and pointer-events: auto to the clipped child, or use JavaScript hit-testing.
Can I use SVG paths inside clip-path?
Yes. clip-path: path() accepts an SVG path string for complex curves, spirals, and text cutouts that polygon cannot express. Browser support for path() syntax is good in modern browsers but lacks the percentage-based responsive scaling of the shape functions.
How is clip-path different from border-radius?
border-radius only rounds rectangle corners with circular or elliptical arcs. clip-path can produce any polygon, diagonal cut, circle, ellipse, or SVG path. For anything more complex than rounded rectangles, clip-path is the right tool.
Why are some browsers showing the unclipped shape?
Very old browsers lack clip-path support entirely, while some intermediate versions require the -webkit-clip-path prefix. Ensure you include both webkit-prefixed and unprefixed declarations. Modern Chrome, Firefox, Safari, and Edge all support clip-path without prefixes.

Explore the category

Regex Tester Test regular expressions with live matches JSON Path Finder Query JSON values using JSONPath-style paths Glob Tester Test glob patterns against newline file/path candidates. URL Parser Parse URLs into protocol, host, path, query parameters, and hash parts. Gitignore Generator Generate merged and deduplicated .gitignore output from stack presets. Package JSON Scaffold Generator Generate package.json scaffolds from project metadata and script presets.
Understanding the Critical Rendering Path and How to Optimize It The critical rendering path is the sequence of steps a browser must complete before showing the first pixel. Optimizing it is one of the hig May 2026 · 10 min

Glossary

Clip Path
A CSS property that defines a clipping region. Only the portion of an element inside the clip path is visible; everything outside is discarded without affecting layout.
Polygon
The clip-path shape function that defines a region by a list of x/y coordinate vertices connected in order. Supports any number of points for triangles, pentagons, stars, and irregular shapes.
Inset
A clip-path shape function that crops an element from its edges inward by specified distances, with optional rounded corners using the round keyword.
Vertex
A single x/y coordinate point in a clip-path polygon. Multiple vertices connected in sequence define the full boundary of the clipped region.
SVG Path
A clip-path value using the path() function with an SVG path string, enabling Bezier curves and complex shapes that geometric primitives cannot express.
Mask
A CSS property that uses an image or gradient as a visibility map. Unlike clip-path, masks support gradual transparency and non-geometric shapes at the cost of more complex syntax.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities