CSS Clip-path Maker

CSS Clip-path Maker - Visual Shape Generator

CSS clip-path is one of the most powerful but underused properties in modern CSS — it lets you crop any HTML element into geometric shapes using polygons, circles, ellipses, or inset rectangles, with GPU-accelerated rendering and full support for CSS animations and transitions. The catch is that the syntax is unforgiving: a polygon shape requires hand-typed coordinate pairs, and any typo silently breaks the entire clip. This visual editor lets you drag points on a live preview, switch between shape types, and apply 12 preset shapes (triangle, rectangle, pentagon, hexagon, star, arrow, chevron, cross, rhombus, etc.). You can also import an existing clip-path value to edit it visually, then copy production-ready CSS that includes both the -webkit-clip-path prefix and the unprefixed clip-path, working in Chrome 55+, Firefox 54+, Safari 9.1+ and Edge 79+.

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.

Can I edit an existing clip-path?

Yes. Paste any existing CSS clip-path value into the Import Clip-path box and click Import — the tool detects the function type, switches to the matching shape, and populates every point or control so you can tweak it visually. This works for polygon() coordinate lists, circle(R at CX CY), ellipse(RX RY at CX CY), and inset() with 1/2/4-value shorthand and an optional 'round' radius.

This is the fastest way to refactor a clip-path you inherited from a stylesheet or design system: instead of hand-retyping every coordinate, paste, drag the points, and copy the updated CSS. The 'at ...' center is optional for circle and ellipse and defaults to 50% 50% when omitted.

What do closest-side and farthest-side mean for circle radius?

circle() and ellipse() accept keyword radii in addition to percentages. closest-side sizes the shape so its edge touches the nearest box side from the center, and farthest-side extends it to the most distant side. closest-corner and farthest-corner reference box corners instead.

Example: circle(closest-side at 50% 50%) always fits inside the element regardless of aspect ratio. Percentages (like circle(40%)) are resolved against a reference value derived from the element's width and height, so a percentage radius can extend past the box on very non-square elements. Use keywords when you need the clip to stay contained as the element resizes. This visual editor works in percentages for precise drag editing; switch to keyword radii by hand in your final CSS when you need responsive containment.

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.

Can I animate clip-path with CSS transitions?

Yes, but only between shapes of the same type with the same number of points. Animating between polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) and polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) works because both have 4 points; animating from a 4-point polygon to a 6-point polygon does NOT interpolate smoothly — the browser jumps to the end state. To animate between shapes with different point counts, define the smaller shape with duplicate adjacent points (a degenerate polygon) so both shapes share the same vertex count. circle() and ellipse() animate cleanly to other circles and ellipses, and inset() animates to other insets, but you cannot transition between different shape functions (polygon to circle). All animations are GPU-accelerated and remain smooth at 60fps even on mobile.

How is clip-path different from mask-image, overflow:hidden, and SVG clipping?

Four ways to crop elements, each with tradeoffs. clip-path uses geometric shapes (polygons, circles) and gives crisp edges with anti-aliasing; it's GPU-accelerated and animates well. mask-image uses an image's alpha channel as a mask, so it supports soft edges, gradients, and arbitrary bitmap masks — but is heavier to render and less performant for animations. overflow:hidden combined with a child element is a hack that only produces rectangular crops; useful for old browsers but inflexible. SVG <clipPath> is the parent of CSS clip-path and supports more complex paths including bezier curves, but requires inline SVG and breaks z-index stacking. Choose clip-path for geometric shapes and animations, mask-image for soft-edged effects, SVG clipPath for complex bezier shapes that CSS cannot express.

Why doesn't my clip-path work on Safari iOS?

iOS Safari requires the -webkit-clip-path prefix in addition to the unprefixed clip-path property, even on modern iOS 16+ versions. Two further pitfalls: (1) Safari does not allow url() references to SVG clip paths in external files — the SVG must be inline in the same document; (2) Safari has historically had bugs with clip-path on elements that have CSS filter or backdrop-filter applied, sometimes ignoring the clip entirely. Use this tool's CSS output which includes both prefixed and unprefixed versions. If clip-path still fails on iOS, ensure your element is not nested inside a parent with filter, transform-style: preserve-3d, or will-change: transform — these can break clip rendering on WebKit.

What's the practical use of clip-path in real designs?

Common production patterns: (1) diagonal section dividers using polygon(0 0, 100% 0, 100% 90%, 0 100%) to create slanted page sections without extra HTML; (2) hexagon avatar grids using a 6-point polygon for honeycomb team-photo layouts; (3) animated reveal effects where text or images uncover from a circle expanding from a click point; (4) message-bubble shapes for chat UIs using a polygon with a notch; (5) Apple-style notch-aware page layouts that clip around device notches; (6) image hover effects that morph between two shape variants. Avoid clip-path for very large elements (>4000px wide) on low-end devices — the GPU rasterization cost grows with element size. For complex polygons (>50 points), prefer SVG clipPath which is more memory-efficient.

Key Features

• 4 shape types: polygon, circle, ellipse, inset
• Visual drag-and-drop point editing
• Import & edit an existing clip-path value
• Output includes -webkit- prefix for Safari/iOS
• 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