CSS Clip-Path Generator

Create CSS clip-path shapes with inset, circle, ellipse and polygon modes. Drag, add and delete polygon points, start from preset shapes, preview on a sample or your own local PNG, JPG or WebP image, and copy or download the clip-path CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Clip-Path Generator

CSS Clip-Path Generator lets you design a clip-path visually. Choose inset (with optional rounded corners), circle, ellipse or polygon. In polygon mode, start from a preset such as a triangle, hexagon, star or arrow, then drag the numbered points on the preview, type exact X and Y percentages, add points between existing ones, or delete points you do not need.

The preview shows the full element faintly and the visible clipped area in full colour, using a built-in gradient sample or a PNG, JPG or WebP image you choose from your device. All coordinates are percentages, so the generated clip-path works at any element size. Points can also be moved with the keyboard, and the CSS can be copied or downloaded as a .css file.

How to use

Choose a shape: inset, circle, ellipse or polygon.
For a polygon, pick a starting shape and drag, add or delete points.
For the other shapes, adjust the sliders.
Optionally choose your own image to preview the clip.
Copy the CSS or download clip-path.css.

Key features

Inset, circle, ellipse and polygon shapes.
Eight polygon presets with up to 30 points.
Drag, add and delete points, or type exact coordinates.
Keyboard control of points with the arrow keys.
Preview on a sample or your own local image.
Copy CSS, download .css and full Reset.

Best practices

Use percentages so the shape scales with the element.
Keep polygons simple — fewer points are easier to maintain.
Remember clip-path hides content visually but does not remove it from layout.
Test the shape at different sizes and aspect ratios.
Provide accessible text alternatives for clipped images.

Benefits

Create custom shapes without image editing.
Precise control over every point.
Works with any image, entirely on your device.
Clean, copy-ready CSS.

Frequently asked questions

What does clip-path do?

It hides the parts of an element outside a shape. Only the area inside the shape is drawn, but the element still takes up its full space in the layout.

How do I add or remove polygon points?

Select a point and click Add point to insert a new one between it and the next point. Use the delete button in the point list, or focus a point and press Delete. A polygon needs at least 3 points.

Can I move points with the keyboard?

Yes. Tab to a numbered point on the preview and use the arrow keys to move it by 1%, or hold Shift to move it by 5%.

Why are values in percentages?

Percentages are relative to the element’s size, so the same clip-path works on small and large elements and keeps the shape proportional to the box.

Is my image uploaded?

No. The image is opened from your device in the browser for the preview only. It is not uploaded, saved or included in the CSS.

Does clip-path affect clicks?

Yes. Pointer events only reach the visible part of the element; clicks outside the shape pass through to whatever is behind it.

Is anything uploaded or saved?

No. The CSS is generated by JavaScript in your browser. Settings and any image you choose stay on your device and are not saved in browser storage; Reset clears them.