Design · Local utility
Edit polygon points by dragging, keyboard or coordinates. Start with four presets and copy a clip-path declaration or full CSS, locally.
Task path / input to outcome
Choose a starting shape
Runs locally · Nothing is uploaded
Compare four polygon shapes, then match the settings in the workspace. Each preview uses the same polygon as its CSS; the exported starting box is 240 × 180 px.
Adjust these settings in the workspaceUse a hexagon for a team avatar or a repeated badge.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Try an angled diamond for a small image or decorative accent.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Use a slanted four-point shape for a card accent.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Point a banner edge toward the next section.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Start with the CSS from any shape above, then add these rules after it. Replace the image path and alt text with your own. The box keeps a 4:3 ratio; object-fit: cover crops the image to fill it without stretching. Percentage coordinates follow the box when it resizes.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Describe your image"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Four templates and two sliders are available. Free vertex editing, SVG path imports and curves are not supported. To copy or download a customized rule, use Copy CSS or Download .css in the workspace.
Task path / input to outcome
Choose Hexagon, Diamond, Parallelogram or Chevron. The two sliders adjust the preset; editing an individual point switches to a custom polygon.
Drag a numbered point or use the coordinate fields. Arrow keys move a focused point by 1%; Shift + arrow moves it by 10%. Add inserts a midpoint after the selected point.
The full example uses your color, a 240px width and a 4:3 aspect ratio. The editor scales to fit the screen.
Review all edges before exporting. Numbered handles are editing controls and are not part of the CSS.
CSS output: Clip-path declaration only / Full example CSS. The full example uses your color, a 240px width and a 4:3 aspect ratio. The editor scales to fit the screen.
Percentage coordinates scale with the element. Paste the declaration into an existing rule, or apply the .clipped-shape class from the full example. Check the result at desktop and mobile sizes.
CSS Clip Path Generator uses its verified local execution path and does not create a hidden input or output history.
Runs inside the current browser tab.
Active tool data never becomes a Toolars document record.
Use the core workflow without creating a profile. Favorites sync to your account after you sign in.
Clear the tab and the active working data is gone.
In a 2026-09-24 local browser run, start from the default Hexagon (horizontal 24%, vertical 50%). Select point 1, change X from 24% to 30%, and set the color to #ff6600. The preview becomes an orange six-point polygon with clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); the other five points stay in their original order.
Full example CSS uses .clipped-shape with width 240px, aspect-ratio 4 / 3, background #ff6600 and both -webkit-clip-path and clip-path. Copy CSS matched the downloaded toolars-clip-path.css (240 bytes). Switching CSS output to Clip-path declaration only and copying gave exactly clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 UTF-8 bytes). Apply it to an element in your own layout to check the crop.
Set point 1 X to 101%. The 2026-09-24 workspace reported that points must be finite and between 0 and 100%; the orange preview and generated CSS cleared, and Copy CSS and Download .css became disabled. Set X back to 30% to restore polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%), then copy again. Crossing edges are not repaired automatically.
Start with four presets, then add, delete or move polygon points. Export a clip-path declaration or full example CSS. Percentage coordinates scale with the element. Paste the declaration into an existing rule, or apply the .clipped-shape class from the full example. Check the result at desktop and mobile sizes.
Common questions