CSS Clip-Path Generator

Create complex clip-path shapes with visual drag handles

DeveloperFREEYour data never leaves your browser

100% freeNo signupRuns in your browser

Built by WOWHOW Team · 14+ yrs engineering

CSS Clip-Path Generator is a free, browser-based tool that lets you create complex clip-path shapes with visual drag handles — with zero signup, zero installation. Your data never leaves your browser. Part of 138+ free developer and business tools at wowhow.cloud, built and maintained by a team with 14+ years of hands-on development experience.

TOOLCSS Clip-Path Generator

Preview

Points (6)

CSS Output

-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Drag the handles on the preview to reshape the path. Click "Add Point" to add more vertices for custom shapes. Coordinates are clamped to 0–100%.

About CSS Clip-Path Generator

CSS clip-path, defined in the CSS Masking Level 1 specification, masks an element's visible area to an arbitrary geometric shape. Polygon clip-paths create multi-point shapes using percentage-based coordinates. Circle and ellipse clip-paths use the circle() and ellipse() functions. Common uses include angled hero sections, hexagonal image grids, diagonal section dividers, and custom button shapes. The coordinate system — percentages of the element bounding box — means shapes scale automatically with responsive layouts.

How It Works

The generator maintains an array of coordinate pairs, each expressed as a percentage of the element's width and height. For polygon shapes, each pair represents a vertex of the polygon in order. The CSS polygon() function takes these pairs as space-separated x% y% values, comma-separated between vertices.

The visual canvas renders a preview element with a colored fill and overlays draggable handles at each polygon vertex. As you drag a handle, its coordinates update in real time and the polygon re-clips immediately. The coordinate inputs below the canvas let you type precise values when visual dragging is insufficient for fine-grained control.

Preset shapes (triangle, arrow, hexagon, star, cross) are defined as normalized coordinate arrays that are immediately available. Circle and ellipse shapes use the circle() and ellipse() CSS functions with at syntax for positioning the center point.

The output includes both clip-path and -webkit-clip-path for backward compatibility, though -webkit-clip-path is only needed for Safari versions before 12.

Who Is This For

A developer creates a diagonal section divider between a hero and content area by applying a polygon clip to a background-colored div without any SVG or image files.

A frontend engineer builds a hexagonal grid for a team photo layout by applying a hexagon clip-path to each image element.

A designer implements an angled hero section from a Figma mockup by matching the polygon coordinates to the design's oblique cut angle.

A developer creates a star-shaped badge element for a pricing table using the star polygon preset and CSS transitions for a pulse animation on hover.

How to Use

Pick a preset shape — triangle, hexagon, star, circle, or custom polygon

Drag the control points on the preview to adjust the shape

Fine-tune coordinates with the editable point inputs below

Copy the generated CSS code with one click

Frequently Asked Questions

Polygons (triangle, pentagon, hexagon, arrow, star, cross, custom), circles, and ellipses. For polygons, you can add or remove points freely.

Yes, the output includes both clip-path and -webkit-clip-path for maximum browser compatibility.

Yes. The drag handles work with touch events. The canvas resizes responsively.

Clip-path polygon coordinates are expressed as percentages of the element's bounding box. The top-left corner is 0% 0% and the bottom-right is 100% 100%. Absolute px values are also supported but percentage values scale automatically with the element size, making them the better choice for responsive designs.

Yes. Clip-path polygon shapes with the same number of points can be smoothly transitioned using CSS transitions or animations. The generator creates shapes with consistent point counts across its presets precisely to enable this. For example, transitioning from a hexagon to a circle requires both to have the same number of polygon points.

Yes. Clipping removes the element from pointer event hit testing outside the visible region. This means clicks on the clipped-away area pass through to elements behind it. This is the correct behavior for custom-shaped buttons or image masks, but be aware that visible overflow effects like box shadows are also clipped.