Developer / CSS shapes

CSS Clip Path Generator: Polygon, Circle, Ellipse and Inset

Make CSS cut-outs with six polygon presets, draggable and keyboard-adjustable points, circle, ellipse and inset controls. Preview a gradient or local image and copy percent or pixel CSS.

CSS Clip Path Generator: Polygon, Circle, Ellipse and Inset: Clips the preview to the selected shape without changing the underlying image file. Percent output follows the element's dimensions. Pixel output uses the reference width and height; the displayed preview scales to fit your screen. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
Clip path shape benchLocal processing

Runs entirely in your browser

Drag a numbered point, use its arrow keys, or enter coordinates. Coordinates below are percentages; pixel output uses the reference size.

Point 1
Point 2
Point 3
Point 4
Point 5
Point 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Percent shapes resize with the element. Circle percentages use the normalised diagonal; ellipse percentages use width and height. Pixel coordinates are fixed to the reference dimensions.

CSS clipping

MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Clipping changes the visible region without changing the element's layout box.

Basic shape coordinates

W3C CSS Shapes Level 1, basic shapes: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Polygon coordinates and ellipse radii resolve against the reference box; circle percentages use its normalised diagonal. Preset coordinates and the gradient are original artwork.

How to use it

  1. Choose a shape and preset, then set reference dimensions.
  2. Drag polygon points, use arrow keys or edit coordinates; tune the controls for other shapes.
  3. Choose percent or pixel output and copy the CSS.

Privacy & limitations

Optional image previews stay on your device. Nothing is uploaded.

Related tools

CSS gridBox ShadowFlexbox

Frequently asked questions

How do I edit a point without dragging?

Focus its numbered handle and use the arrow keys, or enter X and Y percentages in the point list. Polygons need at least three points.

Does this export a cropped image?

No. It exports CSS for an HTML element. The local image is a preview only.

How are circle percentages measured?

CSS uses the normalised diagonal, sqrt((width squared + height squared) / 2), as the circle radius reference. Ellipse radii use width and height separately.

Free tool · runs in your browser · no account required