How to use Clip Path Generator
A polygon clips the painted area of an element to connected vertices. Percentage coordinates make the silhouette scale with the element.
- Add at least three vertices. X moves from left (0%) to right (100%), and Y moves from top to bottom.
- Vertices connect in list order and the final point connects back to the first. Adjust both coordinate sliders for precise keyboard-accessible movement.
- Use the output on an image or decorative surface. Keep important text and focus indicators away from the clipped edges.
A practical starting point
A diagonal lower edge can add a gentle section transition without an extra image.
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
Common mistakes
- Crossing polygon edges may produce an unexpected fill. Keep points in perimeter order for a simple shape.
- Clipping changes painting and hit testing, but the original rectangular box still occupies layout space.
Frequently asked questions
Will clipping wrap surrounding text around the shape?
No. clip-path clips painting. Text wrapping around shapes requires a separate layout technique such as shape-outside on a floated element.