CSS Clip Path Polygon Generator
Create polygons, stars and custom CSS clip-path shapes using draggable vertices, geometric presets and precise coordinates.
Controls
Live preview
Generated code
/* Your CSS will appear here */CSS Clip Path Polygon Generator: how it works
Select a geometric preset, drag the vertex handles, or edit the selected point numerically. Add and remove points to refine the outline. The generator updates the preview and CSS output immediately, so you can test different choices before committing them to your project.
Popular ways to use this CSS generator
- Cut images into unique polygons or decorative shapes.
- Create star, diamond, arrow and hexagon UI accents.
- Fine-tune each vertex using percent-based X and Y coordinates.
For more ideas, try the related tools below. All controls work right in your browser, and the generated code can be included in your own stylesheet.
About clip path CSS.
What does CSS clip-path do?
clip-path clips visible content to a defined geometry such as a circle or polygon.
How does polygon() work?
polygon() accepts a list of x/y coordinate pairs. The browser connects them in order and clips to the resulting shape.
Can clip-path use percentages?
Yes. Percentage coordinates are relative to the element dimensions, which helps shapes scale responsively.
What does CSS clip-path do?
clip-path limits the visible region of an element to a shape such as a polygon, circle, ellipse, or inset rectangle.
How do I create a custom polygon with CSS?
Use clip-path: polygon(...) with coordinate pairs. Each pair represents a vertex, and the tool lets you drag points visually.
Can clip-path work on images?
Yes. Apply clip-path to an image or its container to crop its visible region into a custom shape without modifying the source image.
What do percentage values mean in clip-path polygon?
Percentages are relative to the element reference box. For example, 0% 0% is the top-left corner and 100% 100% is the bottom-right corner.