CSS Clip-path Generator
The CSS Clip-path Generator produces clip-path values for common shapes — triangle, arrow, pentagon, hexagon, star, chevron, circle, ellipse and rounded inset — with a live preview.
About this tool
The CSS Clip-path Generator produces clip-path values for common shapes — triangle, arrow, pentagon, hexagon, star, chevron, circle, ellipse and rounded inset — with a live preview.
How to use it
- Choose a shape from the list.
- Pick a fill color for the preview.
- Click Copy CSS and apply the clip-path to any element or image.
Good to know
- clip-path hides everything outside a shape, so no image mask or SVG file is needed.
- polygon() takes a list of x y points in percentages, which scales with the element.
- circle(50% at 50% 50%) crops an element to a centered circle.
- inset() with round adds rounded corners to a rectangular clip.
- clip-path basic shapes are supported in all current major browsers.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I cut an image into a shape with CSS?
Apply a clip-path to the image, for example clip-path: polygon(50% 0%, 0% 100%, 100% 100%); for a triangle.
What is the difference between clip-path and mask?
clip-path cuts a hard-edged vector shape. mask uses an image or gradient and can create soft, partially transparent edges.
Can clip-path be animated?
Yes, if both shapes use the same function and the same number of points, the browser can transition between them.
Does clip-path affect clicks?
Yes. Areas outside the clipped shape are not rendered and do not receive pointer events.