CSS Clip-Path Generator｜Drag & Drop Editor with Presets

CSS Clip-Path Generator

This free online tool lets you visually create CSS clip-path shapes with a drag-and-drop editor. No coding required — simply drag nodes, choose presets, and copy the generated CSS.

Supported shape functions:

• polygon() — Custom polygons with draggable vertices
• circle() — Circular clipping
• ellipse() — Elliptical clipping
• inset() — Rectangular inset with rounded corners

Choose from 25+ presets, upload your own image for preview, and generate hover animation CSS — all directly in your browser with no data sent to any server.

How to Use — 3 Steps

Step 1: Pick a Preset or Mode

Click a preset from the gallery above, or select a mode tab (polygon / circle / ellipse / inset).

Step 2: Drag to Edit

Drag the nodes on the canvas to adjust the shape. In polygon mode, click the canvas to add nodes, right-click to remove them. Enable snap for precise 5% grid alignment.

Step 3: Copy the Code

Copy the generated CSS from the "Generated Code" section and paste it into your stylesheet.

CSS clip-path Property Guide

polygon()

clip-path: polygon(x1 y1, x2 y2, ...) — Define vertices as comma-separated coordinate pairs. Minimum 3 points. Transition between polygons requires matching vertex count.

circle()

clip-path: circle(radius at cx cy) — Simple circular clipping with customizable radius and center.

ellipse()

clip-path: ellipse(rx ry at cx cy) — Elliptical clipping with independent horizontal and vertical radii.

inset()

clip-path: inset(top right bottom left round radius) — Rectangular clip with optional rounded corners using border-radius syntax.

Frequently Asked Questions

Does clip-path affect SEO?

No. clip-path only changes visual display — the HTML structure and text content remain unchanged and fully accessible to search engines.

Can I animate clip-path on hover?

Yes. Polygons with the same vertex count can transition smoothly. circle() and ellipse() are also animatable. This tool generates hover animation CSS automatically.

Is clipped area still clickable?

No. Content outside the clipped region does not receive pointer events. Be mindful when clipping interactive elements like buttons or links.

Is this tool safe to use?

Yes. All processing happens in your browser. No data — including uploaded images — is ever sent to a server.

Clip-Path Use Cases

Hero Sections

Create diagonal cuts or wave shapes on hero images for a modern first impression.

Profile Pictures

Use circle() for round avatars or polygon() for hexagonal profile images.

Section Dividers

Apply angled or curved clip-paths to section boundaries for a smooth scrolling experience.