4See the live preview with the clip applied to a gradient element
5Copy the CSS clip-path value and add it to your element
Frequently Asked Questions
clip-path is a CSS property that clips (hides) portions of an element outside the defined shape. It supports polygon, circle, ellipse, and SVG path shapes.
Yes. All percentage values in polygon() are relative to the element's bounding box, so the shape scales automatically with the element's size.
Yes, as long as both keyframes use the same shape type and the same number of polygon points. CSS transitions and animations can smoothly interpolate between two clip-path values.
clip-path is well-supported in all modern browsers. For older browser support, the -webkit- prefix may be needed for Safari versions before 13.