Clip elements into circles, hexagons, stars, arrows and custom polygons with a live preview.
Generated live in your browser.
How does CSS clip-path work?
clip-path hides everything outside a shape you define. polygon() takes x y coordinate pairs measured from the top-left corner and joins them with straight lines; circle(), ellipse() and inset() take radii instead. Use percentages so the shape scales with the element. Layout is unaffected — only painting is clipped.
Understanding your result
Because coordinates are percentages, the shape stretches with the element rather than staying a fixed size — a hexagon on a square box looks regular, but on a wide box it stretches horizontally, which is usually what you want for banners. Clipping affects painting only: the element still occupies its full rectangle in the layout, so surrounding text will not flow around the shape. Pointer events do follow the clip, which means the clipped-away corners of a shaped button correctly stop receiving clicks. clip-path also animates and transitions smoothly between polygons that have the same number of points, which makes hover morphs straightforward.
Formula and method
polygon() takes a list of x y coordinate pairs measured from the element’s top-left corner, and the browser draws straight lines between them. Regular shapes place their vertices evenly around a circle, so a hexagon uses points 60 degrees apart at the same radius from the centre; a star alternates between an outer and an inner radius.
Assumptions and limitations
clip-path affects painting only: the element still occupies its full rectangle in the layout, and surrounding text will not wrap around the shape — that needs shape-outside. Transitions between polygons only interpolate when both shapes have the same number of points.
Worked example
A hexagon becomes polygon(100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%, 25% 6.7%, 75% 6.7%) — six vertices spaced 60 degrees apart on a circle centred in the element.
How to use this tool
- Choose a shape from the list, or pick Custom polygon.
- Check the preview to confirm the shape is what you want.
- Copy the CSS.
- Apply it to any element that has a background, image or colour to clip.
Common mistakes to avoid
- Expecting surrounding text to wrap around the shape — use shape-outside for that.
- Applying clip-path to an element with no background or image, so nothing shows.
- Using pixel values, which stop the shape scaling with the element.
- Transitioning between polygons with different numbers of points, which cannot interpolate.
About the CSS clip-path Generator
The CSS clip-path Generator cuts an element into a shape using the clip-path property. Seventeen presets cover the common cases — circles, hexagons, stars, arrows, chevrons and message bubbles — with polygon coordinates calculated geometrically rather than eyeballed, plus a custom mode for your own points.
Who should use this tool
Front-end developers and designers building shaped images, section dividers, badges and decorative panels.
Benefits
- Polygon vertices computed with real trigonometry, so shapes are geometrically exact.
- Seventeen presets plus a validated custom-polygon mode.
- All coordinates in percentages, so shapes scale with the element.
- Includes the -webkit- prefix for wider support.
Practical use cases
- Cropping an avatar into a hexagon or circle.
- Creating an angled section divider between page bands.
- Building arrow-shaped step indicators or breadcrumb chevrons.
- Making a speech-bubble container without extra markup.
Explore all Developer Tools tools
Frequently asked questions
What is the difference between clip-path and shape-outside?
clip-path controls what is painted inside the element. shape-outside controls how surrounding text wraps around it. They are often used together on floated elements.
Can I animate a clip-path?
Yes, provided the start and end polygons have the same number of points. The browser then interpolates each vertex, which produces smooth shape morphs.
Does clipping affect clicks?
Yes. Pointer events respect the clip, so the removed areas no longer respond to clicks or hover — exactly what you want for a shaped button.
Why should coordinates be percentages?
Percentages are relative to the element’s own box, so one rule works at every size. Pixel coordinates break as soon as the element is resized or viewed on another screen.
Is clip-path well supported?
Basic shapes and polygons work in all current browsers. The generated CSS includes -webkit-clip-path as well, which covers older Safari and Chrome versions.