CSS Clip-Path Generator — Free Online Tool

Create custom CSS clip-path shapes visually and copy the code instantly — no design software, no manual coordinate math.

Drag points, pick a preset shape, or build a fully custom polygon, and the tool outputs ready-to-use CSS the moment you’re done.

clip-path: inset(10% 10% 10% 10%);

How the CSS Clip-Path Generator Works

The generator turns visual dragging into clip-path syntax automatically. Every shape you build maps to one of three CSS clip-path functions: polygon(), circle(), or ellipse() (rectangles use inset()).

• Choose a shape — pick from 12 presets (circle, triangle, hexagon, star, arrow, message bubble, and more) or start from Custom Polygon.
• Drag to adjust — every shape shows draggable handles directly on the preview. Polygon shapes let you reposition each point; circles, ellipses, and rectangles use sliders for radius, position, and inset offsets.
• Fine-tune polygons — Custom Polygon mode adds an “Add Point” and “Remove Point” control, so you can go from a triangle to a 10-point shape without writing coordinates by hand.
• Copy the CSS — the code panel updates live and includes an optional -webkit-clip-path line for older Safari versions.

When to Use a CSS Clip-Path Shape

• Hero and banner images — crop a rectangular image into an angled or diagonal shape without touching the image file itself.
• Cards and thumbnails — apply a hexagon, circle, or custom cutout to a card image for a distinct visual style.
• WordPress hero sections and featured images — clip-path is a common technique in WordPress theme customization for section dividers and image treatments, since it works entirely in CSS with no image editor round-trip.

Frequently Asked Questions

What is a CSS clip-path generator?
A CSS clip-path generator is a visual tool that lets you build a clip-path value — the shape used to crop an HTML element — by dragging points on screen instead of writing coordinates manually.

How do I create a clip-path polygon?
Select “Custom Polygon” or any polygon-based preset, then drag the points on the preview until the shape matches what you need. The tool writes the polygon() CSS value automatically as you drag.

What’s the difference between clip-path and mask in CSS?
clip-path crops an element to a hard-edged shape (a polygon, circle, or ellipse), while mask can apply soft edges, gradients, and image-based transparency. Use clip-path for geometric shapes and mask for fades or image-based cutouts.

Do I need a vendor prefix for clip-path?
Modern browsers support unprefixed clip-path. Older Safari versions (pre-9.1) require -webkit-clip-path, which is why this generator includes an optional prefix toggle in the output.

Can I animate a CSS clip-path?
Yes — clip-path is animatable with CSS transitions and keyframes, but only when both the “before” and “after” shapes use the same function with the same number of points (for example, animating between two polygon() values with matching point counts).

Does clip-path work on background images?
No — clip-path clips the entire element box, including its background. To clip only a background image, apply clip-path to a wrapping element or use mask on the background layer instead.

Is this clip-path generator free to use?
Yes. It runs entirely in your browser, requires no signup, and the generated CSS is yours to use in any project.