Loading...
Generate CSS clip paths online for free. Create custom shapes visually. Copy CSS code.
clip-path: circle(50% at 50% 50%);
Pro Tip: Use clip-path to create unique shapes for images, cards, and UI elements. Combine with transitions for animated shape morphing effects.
Select polygon, circle, ellipse, or custom path
Drag points visually to create your desired shape
See how the clip path looks with content
Copy the clip-path CSS to use in your project
Select polygon, circle, ellipse, or custom path
Drag points visually to create your desired shape
See how the clip path looks with content
Copy the clip-path CSS to use in your project
Clip-path cuts elements into custom shapes using CSS, showing only the path area.
Simpler for basic shapes. SVG offers more control for complex illustrations.
Yes, works on images, divs, and any HTML element with content.
Supported in all modern browsers. IE requires SVG fallback.