CSS Clip Path Generator

Create custom CSS clip-path shapes visually with interactive controls

Shape Presets

Background:

#ec4899

Grid

Interactive PreviewDrag points to reshape, or focus a point (Tab) and use arrow keys (Shift for bigger steps, Delete to remove)

Point Coordinates (3 points)

Custom Clip Path

Generated CSS

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Share to Community

Was this tool helpful?

What is CSS Clip Path Generator?

Free online CSS clip path generator to design CSS clip-path shapes with an interactive visual editor.

Choose from preset shapes (circle, ellipse, triangle, polygon, star, arrow) or build a custom polygon by adding and dragging points. Clip an image into a hexagon, cut a triangle out of a div, or mask a photo into any straight-edged shape, then copy the clip-path CSS for your stylesheet. The clip-path property hides everything outside the shape, and the editor runs entirely in your browser. No signup required.

How to Use CSS Clip Path Generator

1Choose a preset shape or start with a custom polygon
2Drag points to adjust the shape
3Add or remove polygon points for custom shapes
4Copy the CSS clip-path code

Frequently Asked Questions

The clip-path CSS property creates a clipping region that determines which parts of an element are visible. Anything outside the clipping path is hidden. It's used for creative shapes, image masking, and transitions.

Built-in shapes: circle, ellipse, and polygon. With polygon you can create any shape - triangles, stars, arrows, hexagons, and custom organic shapes by placing points freely.

No. The element still occupies its original rectangular space in the layout. Only the visual rendering is clipped. Other elements won't flow around the clipped shape.

Pick the polygon preset and set six points, or choose a hexagon preset if available, then apply the generated clip-path to your img element. The image is masked to the hexagon while the underlying file stays unchanged, so you can swap shapes without re-editing the image.

Yes, as long as both shapes use the same type and the same number of points. A polygon with six points can transition smoothly to another six-point polygon. Generate the start and end shapes here, then animate between them with a CSS transition or keyframes.

Share this tool

Related Tools

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

📸

Code Screenshot

Free online code screenshot - create beautiful code screenshots with syntax highlighting

📈

Cubic Bezier Generator

Free online cubic bezier generator - create custom CSS easing curves for transitions

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

🪟

Glassmorphism Generator

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

⬛

CSS Flexbox Generator

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

What is CSS Clip Path Generator?

Free online CSS clip path generator to design CSS clip-path shapes with an interactive visual editor.

Frequently Asked Questions

Built-in shapes: circle, ellipse, and polygon. With polygon you can create any shape - triangles, stars, arrows, hexagons, and custom organic shapes by placing points freely.

No. The element still occupies its original rectangular space in the layout. Only the visual rendering is clipped. Other elements won't flow around the clipped shape.