SVG clip-path Shapes
clip-path lets you crop any element into a custom visual shape non-destructively, directly in CSS or SVG markup.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Defining a Clip Path with basic-shape or SVG
The CSS clip-path property accepts either basic shape functions like circle(), polygon(), and inset(), or a reference to a <clipPath> element defined in SVG markup containing arbitrary path data, letting you crop an image or div into anything from a simple circle to a complex custom silhouette.
- circle(), ellipse(), and polygon() cover most simple clipping needs
- A referenced SVG <clipPath> handles arbitrary complex custom shapes
- The underlying image or element data is never actually cropped, only masked
Animating clip-path for Reveal Effects
Because clip-path is a standard CSS property, it can be transitioned or animated like any other, making it a common technique for image reveal effects, expanding shape overlays, and scroll-triggered animations — polygon() clip paths in particular animate smoothly between differently shaped point sets.
- Transitioning clip-path values creates smooth shape reveal animations
- polygon() point sets animate cleanly between compatible shapes
- Works well combined with scroll-triggered or hover-based interactions
Frequently Asked Questions
Does clip-path work the same in CSS and SVG?
The concept is the same, but syntax differs slightly — CSS clip-path accepts basic-shape functions or a url() reference to an SVG clipPath element, while SVG's own clip-path attribute references a <clipPath> element directly.
Can I animate between two different polygon() shapes?
Yes, as long as both polygon() values have the same number of points, browsers can interpolate smoothly between them for a morphing clip animation.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG