CSS Clip-Path Generator

Drag points to create custom clip-path shapes.

Ad
30%
50%
50%
10%
10%
10%
10%
0%
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Ad

Frequently Asked Questions

What CSS clip-path shapes are supported in browsers? +
All modern browsers support polygon(), circle(), ellipse(), and inset() clip-path shapes. The path() function with SVG paths also has broad support. Only IE lacks clip-path support entirely.
How do I animate a clip-path transition? +
You can animate between clip-path values using CSS transitions or keyframes, but both shapes must use the same function and the same number of points. For polygon shapes, both the start and end states need identical point counts for smooth interpolation.
What is the difference between clip-path and overflow hidden? +
Overflow hidden clips content to the element's rectangular box, while clip-path clips to any shape you define. Clip-path also affects the element's visual rendering and hit testing, meaning areas outside the clip path won't receive click events.
Can I use clip-path with images and videos? +
Yes, clip-path works on any HTML element including images, videos, divs, and even iframes. It clips the entire element's rendering to the specified shape. This makes it useful for creative image cropping without modifying the source file.
Ad
Copied!