CSS Clip Path Generator

This CSS clip path generator lets you design clip-path shapes visually instead of writing coordinate pairs by hand. Drag handles on an interactive canvas, watch the shape update in real time, and copy the generated CSS straight into your stylesheet.

It supports all four clip-path shape functions — polygon, circle, ellipse, and inset — and ships with 28 ready-made presets. It is built for frontend developers cutting non-rectangular UI, web designers shaping hero sections and image masks, and anyone learning how clip-path values actually work.

Private by design: every shape and CSS value is generated in your browser. Nothing — including any background image you load to preview a shape — is ever uploaded to a server.

How to Use the Clip Path Maker

Choose a shape type

Pick a tab — Polygon, Circle, Ellipse, or Inset — or open Presets to start from a ready-made shape like a star, arrow, or shield.

Edit the shape

Drag handles on the canvas to reshape it. For polygons, click an edge to add a point and double-click a handle to remove one. For circle, ellipse, and inset, drag the center and radius or edge handles, or use the sliders for exact values.

Use the canvas helpers

Toggle Outside to dim the clipped-away area, switch on the Grid for alignment, or change the canvas color or upload an image to preview the shape on real content.

Copy the CSS

The generated clip-path value appears in the output panel. Click Copy CSS and paste it into your stylesheet. Already have a value? Use Import to paste existing CSS and keep editing it visually.

Features

Interactive Visual Editor

Drag handles on a 4:3 canvas and the CSS updates instantly, with percentage-based coordinates for accurate positioning.

Four Shape Types

Build polygon, circle, ellipse, and inset clip paths — every shape function the CSS clip-path property supports.

Inset with Rounded Corners

Clip inward from each edge and add a border-radius to round the corners of the inset rectangle.

28 Built-in Presets

Start from triangles, regular polygons, stars, arrows and chevrons, message bubbles, shields, and circle/ellipse/inset variations.

Precise Point Editing

Enter exact X/Y values for every polygon point through the points list, with 0.1% precision for clean, readable output.

Smart Point Management

Click an edge to insert a point between the nearest vertices, and double-click or delete to remove one — never below the 3-point minimum.

Inset Lock

Enable Lock All to change all four inset sides at once for uniform clipping from every edge.

Undo / Redo History

Every change is recorded in a history stack of up to 50 states, so you can step backward and forward freely.

Import Existing CSS

Paste a polygon, circle, ellipse, or inset value and load it into the editor to keep refining it visually.

Custom Background

Change the canvas color or upload an image to preview how your clip path looks on your actual content.

Grid & Outside Overlays

Show a 10×10 percentage grid for alignment and dim the outside area to see exactly what gets clipped.

Keyboard Shortcuts

Undo and redo with Ctrl+Z / Ctrl+Y, nudge a selected point with the arrow keys (1%, or 5% with Shift), and delete with Delete.

Frequently Asked Questions

What is clip-path in CSS?

The CSS clip-path property defines a clipping region for an element. Only the part inside the shape stays visible; everything outside is hidden. It is commonly used for non-rectangular layouts, image masks, and decorative UI elements.

How does clip-path polygon work?

A polygon() value is a list of X/Y coordinate pairs connected by straight edges, for example polygon(50% 0%, 100% 100%, 0% 100%) for a triangle. Each point is a percentage of the element's width and height. In this tool you drag handles instead of typing the pairs, and the generator writes the polygon value for you.

How do I add or remove a polygon point?

Click near an edge on the canvas to insert a new point between the two nearest vertices. To remove one, double-click its handle, select it and press Delete or Backspace, or use the remove button in the points list. A polygon always keeps at least 3 points, so the delete controls are disabled once you reach the minimum.

Can clip-path have rounded corners?

Yes, with the inset shape. The round keyword in inset() adds a border-radius to the clipped rectangle — for example inset(10% round 20%) clips 10% from each edge and rounds the corners by 20%. Adjust the Border Radius control on the Inset tab to set it.

What's the difference between circle and ellipse?

A circle has a single radius and is always perfectly round. An ellipse has two independent radii — one horizontal (X) and one vertical (Y) — so you can make oval shapes that are wider or taller than they are round.

Can I import my existing clip-path CSS?

Yes. Click Import below the CSS output, paste your value (with or without the clip-path: prefix), and apply it. The parser handles all four shape types — polygon, circle, ellipse, and inset — and loads the shape into the editor for further tweaking.

Is clip-path supported in all browsers?

The basic shapes used here — polygon, circle, ellipse, and inset — are supported in all current versions of Chrome, Firefox, Safari, and Edge. For very old browsers, provide a fallback or a polyfill.

Are my shapes saved between sessions?

No. Shapes are not persisted across page loads, so copy your CSS before leaving. You can store the value yourself and bring it back any time using the Import feature.

Is my data sent to any server?

No. All shape editing and CSS generation happen entirely in your browser. No data is uploaded or transmitted, including any background image you load to preview a shape.