Generate CSS clip-path shapes visually. Choose from presets or customize your own — circle, ellipse, polygon, inset. Copy ready-to-use CSS instantly. 100% free and client-side.
clip-path: circle(50% at 50% 50%);The CSS Clip Path Generator is a visual tool for creating custom shapes using the CSS clip-path property. Instead of manually writing complex polygon coordinates, you can select from a variety of preset shapes and customize their parameters in real time. The clip-path property lets you clip an element to a basic shape or polygon, making it perfect for creating unique layouts, image masks, and creative web designs. All processing happens in your browser — no data is sent anywhere.
The CSS clip-path property creates a clipping region that defines what part of an element should be shown. Parts inside the region are displayed, while parts outside are hidden. It can use basic shapes like circle() and ellipse(), the inset() function for rectangles with rounded corners, or polygon() for custom multi-point shapes.
clip-path with basic shapes (circle, ellipse, inset, polygon) is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, you may need to provide a fallback layout. The -webkit- prefix is no longer needed for current browser versions.
Yes. clip-path can be applied to any HTML element including images, divs, videos, and iframes. It is commonly used to create circular profile pictures, hexagonal image galleries, diagonal section dividers, and other creative layouts.
border-radius only rounds the corners of a rectangular element, keeping it fundamentally a rectangle. clip-path can create any arbitrary shape including triangles, stars, and custom polygons by hiding parts of the element entirely. For complex shapes beyond rounded rectangles, clip-path is the tool to use.