Loading…
Loading…
Create complex clip-path shapes with visual drag handles
-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%.
Run your projects on Claude Code?
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29CSS 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.
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.
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.
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
About the CSS Clip-Path Generator
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.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →