CSS Clip-Path Generator
Drag the points, then copy the CSS. The picture never leaves your browser.
Drag a point. Double-click a side to add one. Arrow keys move the selected point.
clip-path: polygon(50% 6%, 88.1% 28%, 88.1% 72%, 50% 94%, 11.9% 72%, 11.9% 28%); -webkit-clip-path: polygon(50% 6%, 88.1% 28%, 88.1% 72%, 50% 94%, 11.9% 72%, 11.9% 28%);
The end shape needs the same number of points.
How to use this CSS clip-path generator
- Start from a shape, or drag the points on the preview. The hexagon is the sample.
- Double-click a side to add a point. Select a point and choose Remove point to delete it. Arrow keys move the selected point.
- Choose percent or pixels. Percent scales with the element. Pixels use the box size next to that control.
- Copy the CSS. It includes clip-path and -webkit-clip-path. If you pick a matching end shape, copy the animation too.
Browser support
| Topic | What to know |
|---|---|
| Chrome, Edge, Firefox, Safari | clip-path is supported |
| Older Safari | Use the -webkit-clip-path line as well |
| polygon() | Any number of corners, at least three |
| circle() and ellipse() | A round crop, with a center and radii |
| inset() | A rectangle, optionally with rounded corners |
Examples
A CSS polygon generator is the polygon part of this page. A triangle is three points. A star is ten, because each tip has an inner corner. Circle, ellipse, and inset are not polygons, so they use their own functions. The frame uses polygon(evenodd) so the middle is a hole.
clip-path: polygon(50% 8%, 92% 92%, 8% 92%); -webkit-clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
FAQ
What is a CSS clip-path generator?
It builds the clip-path value that hides part of an element. You drag the corners of a polygon, or start from a shape such as a hexagon, star, or circle. The page writes the CSS, including the older -webkit-clip-path line. Nothing you draw is uploaded.
What is the difference between a clip-path generator and a CSS polygon generator?
A polygon generator only writes polygon(). This clip path maker also writes circle(), ellipse(), and inset() with rounded corners. Polygon shapes are the ones with draggable corners. Double-click a side to add a corner, or remove the selected one.
Should I use percentages or pixels?
Percentages scale with the element, so they are the usual choice. Pixels are measured against the box size next to the unit control, which defaults to 320. The preview is square, so a percent on the preview matches that square.
Do I still need the -webkit-clip-path line?
Current Chrome, Firefox, Safari, and Edge understand clip-path. Older Safari wanted the -webkit- prefix. The copy block includes both, so one paste covers both.
Why will the animation not run between some shapes?
CSS can morph clip-path only when both values are the same function with the same number of points. A triangle can animate into another triangle. It cannot animate into a star. Pick an end shape that matches, or the page explains why it cannot.
Can I use my own picture?
Yes. Choose Your image and pick a file. The browser keeps it in memory for the preview and does not send it anywhere. Refreshing the page clears it. The sample, gradient, and solid color choices need no file.
More from CoreCodify
This clip path maker is free. CoreCodify also sells kits for checking a site before it launches. Checkout stays on Gumroad.
- Browse the shopChecklists, calculators, and kits for people who build software.
- Core Web Vitals Audit & Fix Kit: LCP, INP & CLS Checklist, Tracker & Client ReportDiagnose a slow client site, fix LCP, INP and CLS in a sensible order, and show the change with field data: 71 checks, five test protocols, a workbook and report templates.
- Website Pre-Launch QA Checklist: 79 Checks + Excel/Sheets Tracker for Web DesignersCatch the usual pre-launch misses on a client site - broken forms, leftover demo text, a forgotten noindex tag, missing redirects, a stuck mobile menu - with 79 checks, a live tracker and a handover pack.
- Web Design Pricing Calculator: Project Quotes, Packages, Hourly Rate & Care Plans (Excel + Sheets)Turn a website brief into a quote in about 15 minutes: your floor hourly rate, a 42-task estimate, three packages, care plans and a one-page quote you can send.
