CSS Clip-Path Generator
Design ToolsGenerate CSS clip-paths
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
P150.0%, 0.0%
P20.0%, 100.0%
P3100.0%, 100.0%
.element {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}About CSS Clip-Path Generator
Visually create CSS clip-path shapes with presets and custom polygon mode.
Frequently Asked Questions
What is CSS clip-path?
CSS clip-path is a property that defines a clipping region for an element. Only the portion of the element inside the clipping shape is displayed, while the rest is hidden. It supports circles, ellipses, polygons, and more.
How do I create a custom polygon shape?
Switch to Custom Polygon mode and click on the preview area to add points. Each click adds a vertex to your polygon. You can drag existing points to adjust them, or remove them by right-clicking.
Which browsers support clip-path?
CSS clip-path with polygon() is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, you may need the -webkit- prefix for some shapes.
Is my data safe?
Yes! All processing happens entirely in your browser. No data is sent to any server. No data is collected, stored, or transmitted.
Can I use clip-path with images?
Absolutely. Clip-path works on any HTML element including images, divs, and videos. The preview in this tool uses a gradient background so you can clearly see the clipped shape.
Ad
728 × 90