CSS clip-path Generator

A sample image being clipped by the polygon shape.

Presets

Preview Image

Generated CSS

Instructions

Click an edge to add a point. Drag points to move them. Double-click a point to remove it.

How to Use the `clip-path` Generator

This generator provides an intuitive way to create complex shapes using the polygon() function of the CSS clip-path property. The shape you create will act as a mask, hiding any part of your element that falls outside of it.

Upload Your Image. Use the "Upload Image" button to select an image from your device. This will help you visualize the final effect with your own content. You can revert to the default placeholder with the "Reset" button.
Choose a Preset. Start by selecting one of the preset shapes to use as a base for your design.
Drag, Add, and Remove Points. Modify the shape by dragging points, adding new points by clicking an edge, or removing points by double-clicking them.
Copy the Code. The CSS code in the output box updates in real time. Click the "Copy" button to grab the code and use it in your project.

Understanding the `clip-path` Property

The clip-path property creates a clipping region that defines which part of an element is visible. Anything inside the region is shown, while anything outside is hidden. It is a powerful tool for breaking away from standard rectangular web layouts.

Syntax

clip-path: <clip-source> | none;

Common Function Values

While this generator focuses on the polygon() function, there are several other basic shapes you can use.

Function	Description	Example
`polygon()`	Defines a shape by a set of coordinate points. Each pair represents a vertex of the polygon.	`polygon(50% 0%, 100% 100%, 0% 100%)`
`circle()`	Creates a circular clipping path. You can define its radius and center position.	`circle(50% at 50% 50%)`
`ellipse()`	Creates an elliptical clipping path with x and y radii and a center position.	`ellipse(50% 25% at 50% 50%)`
`inset()`	Defines an inset rectangle. You can specify offsets from each of the four sides.	`inset(10px 20px 30px 40px)`
`url()`	References an SVG `<clipPath>` element to be used as the clipping path.	`url(#my-svg-clip-path)`

Use Cases and Considerations

Creative Layouts. Use clip-path on images and containers to create dynamic, overlapping, and non-rectangular page designs, such as diagonal section breaks.
Hover Effects. You can transition the clip-path property on hover to create interesting reveal or shape-shifting effects. For a smooth animation, the starting and ending polygon shapes must have the same number of vertices.
Text Wrapping. Paired with the shape-outside property, you can use a clip-path shape to control how inline content wraps around a floated element, creating more magazine-like text layouts.

Browser Support

The clip-path property has strong support in all modern browsers. For older versions of Safari and Chrome, you may need to use the -webkit- prefix. However, for most use cases today, the unprefixed version is sufficient. Always test on your target browsers to ensure compatibility.