CSS Clip Path Generator

The CSS clip-path property lets you define a clipping region for an element — only the part inside the region is visible, and everything outside is hidden. It supports shapes like polygon(), circle(), ellipse(), and path(), enabling you to create non-rectangular elements, diagonal section dividers, geometric image masks, and much more without any image editing software.

When the Polygon shape type is selected, blue circular handles appear on the preview canvas at each vertex of the polygon. Click and drag any handle to reposition that point. The CSS output updates instantly as you drag. You can also edit each point's X and Y percentage values directly in the control points panel on the left.

Clip-path polygon coordinates are expressed as percentages of the element's width and height. 0% 0% is the top-left corner, 100% 0% is the top-right, 100% 100% is the bottom-right, and 0% 100% is the bottom-left. Values outside 0–100% clip beyond the element's boundary, which can produce interesting effects on overflow-visible containers.

Use the "+ Add Point" button to append a new control point at 50% 50% (center), then drag it or edit its X/Y values to the desired position. To remove a point, click the "− Remove" button beside it. A polygon requires at least 3 points, so the remove button is disabled when only 3 points remain.

The tool includes 12 polygon presets: Triangle, Diamond, Arrow Right, Arrow Left, Pentagon, Hexagon, Star, Chevron, Slant Left, Slant Right, Bevel, and Rabbet. Applying a preset switches the shape type to Polygon and loads the preset's control points, which you can then further customize by dragging handles or editing values.

Selecting the Circle shape type generates a clip-path: circle(r% at cx% cy%) value. The Radius slider controls the circle's size as a percentage of the element's reference box. The Center X and Center Y sliders move the circle's center point within the element. A radius of 50% centered at 50% 50% creates a perfect circle inscribed in the element.

A circle clip-path takes a single radius, producing a perfectly round clipping shape. An ellipse clip-path takes separate X radius (rx) and Y radius (ry) values, allowing you to create oval shapes. Both also accept center X/Y positioning. Use ellipse when you need an oval rather than a perfect circle.

There are two copy buttons in the CSS Output section. "Copy CSS" copies the complete CSS rule including the .element selector and the clip-path property. "Copy Value" copies just the clip-path value so you can paste it into an existing rule in your stylesheet.

CSS clip-path with basic shapes (polygon, circle, ellipse) is well-supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The property does not require vendor prefixes for basic shapes in current browsers. Internet Explorer does not support clip-path, but it has negligible market share.

Yes! CSS clip-path can be transitioned and animated smoothly between shapes of the same type with the same number of points. For example: "transition: clip-path 0.4s ease". Two polygon() values with the same number of vertices will interpolate smoothly. Ensure both shapes have the same number of points and type for smooth animation.

When you switch the Preview Background to "Image", the preview fills with a gradient (indigo to pink) instead of a flat color. This helps you see how the clip-path would look applied to a photo or rich background. In your actual CSS, you can pair clip-path with any background-image or apply it to an <img> element.

Apply a polygon clip-path to a full-width section element to create diagonal, chevron, or wave-like transitions between page sections. Use the Slant Left or Slant Right presets as starting points, then adjust the corner percentages to control the angle of the cut.