100% PrivateFree
Preview
Points (3)
1
2
3
CSS Output
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
How It Works
1
Choose a Shape
Select a preset shape or start with a custom polygon.
2
Drag Points
Click and drag the control points to customize your shape. Add or remove points as needed.
3
Copy CSS
Copy the generated clip-path CSS property to use in your stylesheet.
Frequently Asked Questions
What is CSS clip-path?
clip-path is a CSS property that clips an element to a specific shape, hiding parts outside the defined area. It supports circles, ellipses, polygons, and custom paths.
What shapes can I create?
You can create circles, ellipses, and any polygon shape with custom vertices. This tool includes presets for triangles, pentagons, hexagons, stars, arrows, and diamonds.
Does clip-path affect layout?
No, clip-path only affects the visual rendering. The element still occupies its full space in the layout, similar to how visibility:hidden works.
Can I animate clip-path?
Yes, clip-path can be animated with CSS transitions and animations, as long as the shapes have the same number of points. This enables morphing effects.
Is clip-path well supported?
clip-path polygon is supported in all modern browsers. The circle() and ellipse() forms have even broader support. Only IE lacks support.
Explore More
Love this tool? Explore 999+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools