What is CSS clip-path?

The clip-path CSS property defines a clipping region that sets what part of an element should be shown. Pixels outside the clipping region are hidden. It accepts geometric shapes like polygon(), circle(), ellipse(), and inset(), as well as SVG path references.

How do I add or remove polygon vertices?

In Polygon mode, click anywhere on the canvas (outside existing handles) to add a new vertex at that position. Click an existing handle to select it (it turns red), then press the Delete or Backspace key to remove it.

What do the percentage values mean?

Clip-path coordinates are expressed as percentages relative to the element's bounding box. The top-left corner is 0% 0%, the bottom-right is 100% 100%, and the center is 50% 50%. This makes the shape scale correctly when the element resizes.

Can I animate clip-path in CSS?

Yes — clip-path is animatable with CSS transitions and animations, but only between shapes of the same type and with the same number of points. For example, you can transition between two polygons with identical vertex counts.

Design 免费无需注册

CSS Clip Path Generator

Visually generate CSS clip-path shapes — polygon, circle, ellipse, inset — with draggable handles, preset shapes, and live preview.

正在加载工具…

关于此工具

Create any CSS clip-path shape without hand-coding coordinates. The interactive canvas shows a live preview of a colored element with your clip-path applied, updating in real time as you drag handles or type values. Four shape modes cover every clip-path syntax: Polygon mode places draggable circular handles at each vertex — drag them to reshape the clip area freely. Click the canvas to add a new vertex, and click an existing handle then press Delete to remove it. Circle mode adjusts the radius and center position with two handles. Ellipse mode provides separate rx/ry radius handles plus a center handle. Inset mode shows four edge handles for top, right, bottom, and left insets with a border-radius option. Jump-start your design with 8 built-in polygon presets: triangle, inverted triangle, pentagon, hexagon, 6-pointed star, right arrow, left arrow, and parallelogram. Each preset loads as editable polygon points you can then customize. The generated CSS line (`clip-path: polygon(...)` or equivalent) is shown beneath the canvas and can be copied to the clipboard with one click. A toggle lets you preview the clip-path on a sample image instead of a solid color.

使用方法

1 Select a shape type: Polygon, Circle, Ellipse, or Inset.
2 For Polygon: drag the handles to position vertices, or click a preset to load a starter shape.
3 For Circle or Ellipse: drag the center handle to move the shape and the radius handles to resize.
4 For Inset: drag the four edge handles to set the inset values, and optionally set corner radius.
5 The generated CSS updates live below the canvas — click Copy CSS to copy it to the clipboard.
6 Toggle the image preview to see how the clip-path looks on a photo instead of a solid color.

What CSS clip-path does

The CSS clip-path property defines a visible region for an element: everything inside the shape is shown, everything outside is hidden. The element still occupies its full box in the layout — clipping only changes what you see, not how much space it takes. This tool lets you draw that shape visually and copies out the exact CSS, so you never have to calculate vertex coordinates by hand. It supports the four basic shape functions, and crucially, all coordinates are expressed as percentages of the element's bounding box, where 0% 0% is the top-left corner, 100% 100% is the bottom-right, and 50% 50% is dead center. Using percentages means the shape scales automatically when the element resizes.

Mode	CSS function	What you control
Polygon	`polygon()`	A list of vertices you drag, add, or delete
Circle	`circle()`	A radius and a center point
Ellipse	`ellipse()`	Separate horizontal and vertical radii plus center
Inset	`inset()`	Top/right/bottom/left insets, with optional corner radius

How the polygon editor works

Polygon mode is the most flexible. Each vertex is a draggable handle on the canvas, and the dashed outline shows the resulting shape live. You can click empty canvas to add a vertex, click a handle to select it (it turns red), and press Delete or Backspace to remove it. To skip the manual work, load one of the built-in presets — triangle, inverted triangle, pentagon, hexagon, six-pointed star, arrow, parallelogram, or diamond — each of which loads as fully editable points you can then nudge.

A worked example

Choose Polygon mode and load the triangle preset. Its three vertices are 50% 0% (top center), 100% 100% (bottom-right), and 0% 100% (bottom-left), so the generated line is clip-path: polygon(50% 0%, 100% 100%, 0% 100%);. Drag the apex handle to the right and the first coordinate changes to, say, 70% 0%, instantly producing a leaning triangle. Switch to Inset mode and set every edge to 10% with a corner radius — the tool emits clip-path: inset(10% 10% 10% 10% round 12px);, carving a rounded rectangle that sits 10 percent in from each edge. Click Copy CSS and paste the single declaration straight into your stylesheet.

Practical use cases

Angled section dividers. A shallow polygon clip on a full-width banner creates the diagonal "slash" between page sections that pure rectangles cannot.
Non-rectangular images. Clip a photo into a hexagon or circle for avatars and team grids without exporting masked PNGs.
Arrow and ribbon shapes for badges, breadcrumbs, and call-out buttons, all from a single HTML element.
Reveal animations. Because clip-path is animatable, an expanding inset or growing circle makes a smooth content-reveal effect.

The rules for animating clip-path

You can transition or animate clip-path, but the browser can only interpolate between shapes of the same function and the same number of points. A polygon with five vertices can morph into another five-vertex polygon, but not into a triangle, and a circle() cannot tween into a polygon(). If you want a polygon to appear to "lose" a corner, give both keyframes the same vertex count and place two of the points on top of each other. Animating circle() radius from 0% to 75% is the simplest, most reliable reveal.

Circle, ellipse, and inset in detail

The non-polygon modes each expose their own handles. Circle mode produces circle(r% at cx% cy%) — a radius handle and a center handle — and is the right choice for avatars and round badges because a single radius value keeps it perfectly round regardless of the element's aspect ratio. Ellipse mode splits that into two radii, ellipse(rx% ry% at cx% cy%), so you can squash the shape horizontally or vertically independently. Inset mode, inset(top% right% bottom% left% round radius), carves a rectangle inward from each edge and is the only mode that supports a corner radius, which is why it is the cleanest way to make a rounded-rectangle clip. A subtle but important detail: a circle radius given as a percentage is resolved against a diagonal measure of the box, not its width, so a 50% circle on a wide rectangle reaches beyond the visible width — keep that in mind when a circle looks larger than expected on a non-square element.

Common mistakes

Forgetting that layout is unchanged. Clipped-away regions still take up space and still capture clicks unless you also clip pointer events; neighbouring elements do not flow into the hidden area.
Mixing units carelessly. This tool outputs percentages so shapes stay responsive; hard-coding pixel coordinates makes a shape that breaks when the element resizes.
Over-clipping content. Text or buttons that fall outside the clip region simply vanish and become unreachable — keep interactive content well inside the visible shape.
Expecting a visible border to follow the shape. A normal CSS border is drawn on the rectangular box and is itself clipped; to outline a clipped shape you need an SVG stroke or a layered approach.

The editor is entirely client-side: the canvas, the math, and the generated CSS are produced in your browser, and nothing is uploaded.