What is the CSS clip-path property?

clip-path defines a region of an element that is visible; anything outside the region is clipped away. It supports basic shapes like polygon(), circle(), ellipse(), and inset(), letting you crop elements into non-rectangular shapes without images.

Can I edit the polygon points by hand?

Yes. After choosing any polygon preset, the vertices appear as draggable handles on the preview. Drag them to reshape the polygon and the percentage coordinates update live in the generated CSS.

Is clip-path supported in all browsers?

Modern versions of Chrome, Edge, Firefox, and Safari all support clip-path with basic shapes. For older browsers you may need a -webkit- prefix or a fallback, since unsupported browsers will simply ignore the rule and show the full element.

CSS Clip Path Generator

NEW

Build CSS clip-path shapes by dragging points or picking a preset, then copy the polygon CSS.

Preset shapes

Show clipped-away area (dimmed)

Drag the points on the preview to reshape the polygon. Each point is an X/Y percentage.

Preview

CSS

Send output to:

How to use Clip Path Generator

Click a preset shape to load its points, or choose inset, circle, or ellipse for rounded clips.
Drag the points on the preview to reshape a polygon, or adjust the sliders for circle and inset modes.
Toggle 'Show clipped-away area' to preview the full element, then click Copy CSS to grab the clip-path rule.

What is Clip Path Generator?

The Clip Path Generator lets you carve elements into custom shapes using the CSS clip-path property. Pick from 20+ presets — triangles, hexagons, arrows, message bubbles and more — then fine-tune by dragging each polygon vertex directly on the live preview.

For rounded shapes, switch to the inset, circle, or ellipse presets and use the sliders to control radius and position. Every change updates the preview and the generated clip-path CSS instantly, and the optional dimmed overlay shows exactly which part of the element is being clipped away.

Everything runs entirely in your browser, so your work never leaves your device. Copy the resulting one-line CSS and paste it straight into your stylesheet.

FAQ

What is the CSS clip-path property?: clip-path defines a region of an element that is visible; anything outside the region is clipped away. It supports basic shapes like polygon(), circle(), ellipse(), and inset(), letting you crop elements into non-rectangular shapes without images.
Can I edit the polygon points by hand?: Yes. After choosing any polygon preset, the vertices appear as draggable handles on the preview. Drag them to reshape the polygon and the percentage coordinates update live in the generated CSS.
Is clip-path supported in all browsers?: Modern versions of Chrome, Edge, Firefox, and Safari all support clip-path with basic shapes. For older browsers you may need a -webkit- prefix or a fallback, since unsupported browsers will simply ignore the rule and show the full element.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Clip Path Generator

How to use Clip Path Generator

What is Clip Path Generator?

FAQ

Related tools

People also use

Ad blocker detected

Keyboard shortcuts