CSS Clip-path Maker

CSS Clip-path Maker - Visual Shape Generator

Create complex CSS clip-path shapes visually. This tool supports polygon, circle, ellipse, and inset shapes with an intuitive drag-and-drop interface for polygon points. Perfect for creating unique designs, image masks, and creative layouts.

What is CSS clip-path?

CSS clip-path is a property that creates a clipping region to define which parts of an element are visible. Parts outside the clipping region are hidden.

Shape types:

polygon() - Custom shapes with multiple points
circle() - Circular clipping
ellipse() - Oval clipping
inset() - Rectangular with optional rounded corners

The clip-path property is widely supported in modern browsers and is great for creating creative layouts, image masks, and unique design elements.

How do I create a polygon clip-path?

Polygon clip-path uses coordinate points:

Syntax: polygon(x1% y1%, x2% y2%, ...)

Each point is defined by X and Y percentages:
- 0% 0% = top-left corner
- 100% 0% = top-right corner
- 100% 100% = bottom-right corner
- 0% 100% = bottom-left corner
- 50% 0% = top center

Example triangle:
polygon(50% 0%, 100% 100%, 0% 100%)

This tool lets you drag points visually or enter exact values. Click 'Add Point' to add more vertices to your shape.

How do circle and ellipse work?

Circle syntax:
circle(radius at centerX centerY)

Example: circle(50% at 50% 50%)
- Creates a circle with 50% radius
- Centered at 50% 50% (middle)

Ellipse syntax:
ellipse(radiusX radiusY at centerX centerY)

Example: ellipse(50% 30% at 50% 50%)
- Creates an oval shape
- 50% wide, 30% tall
- Centered at middle

Radius values:
- Percentage: relative to element size
- closest-side: fits inside element
- farthest-side: extends to farthest edge

What is inset clip-path?

Inset creates a rectangular clip with optional rounded corners:

Syntax: inset(top right bottom left round radius)

Values represent inset from each edge:
- inset(10%) - 10% from all sides
- inset(10% 20%) - 10% top/bottom, 20% left/right
- inset(10% 20% 30% 40%) - individual values

Rounded corners:
- inset(10% round 20px) - adds border radius
- inset(10% round 20%) - percentage radius

Example:
inset(5% 10% 5% 10% round 15px)
Creates a rounded rectangle inset from edges

What browsers support clip-path?

Browser support for clip-path:

Full support:
- Chrome 55+
- Firefox 54+
- Safari 9.1+ (may need -webkit- prefix)
- Edge 79+
- Opera 42+

For Safari compatibility, add:
-webkit-clip-path: polygon(...);
clip-path: polygon(...);

Note: clip-path does not affect element layout - the element still takes up its full space, only the visible area changes.

Performance tip: clip-path triggers GPU acceleration, making it efficient for animations.

Key Features

• 4 shape types: polygon, circle, ellipse, inset
• Visual drag-and-drop point editing
• 12 preset polygon shapes
• Add and remove polygon points
• Precise numeric input for all values
• Live preview with instant updates
• Circle radius and position controls
• Ellipse with independent X/Y radii
• Inset with border radius support
• Copy CSS code to clipboard
• Touch-friendly for mobile devices
• 100% client-side processing
• Dark mode support
• Responsive interface