Skip to content
ToolQivo

Clip Path Generator

Draw a clipping shape with draggable points and get the CSS.

Developer Tools Reviews Free · no sign-up

Drag the handles on the preview, or edit the numbers here.

Preview

Drag a handle to move a point. The clipped-away area is not clickable either.

Quick Tool Overview

The Clip Path Generator lets you drag the points of a shape over a real image, covering polygon, circle, ellipse and inset, with presets for the shapes people actually build.

What it does
Builds CSS clip-path shapes visually
You give it
Draggable points, or a shape function
You get back
A clip-path declaration with a live preview
Best for
Diagonal sections, chevrons, badges and image masks
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the Clip Path Generator

clip-path cuts an element to a shape, showing only what falls inside it. Drag the points of a polygon and the shape updates live over a real image, so you can see exactly what is kept and what is cut away.

All four basic shape functions are covered. polygon() takes any number of points and is what the diagonal section dividers everywhere are made of. circle() and ellipse() take a radius and a position. inset() cuts a rectangle in from each edge and accepts its own corner radii. Presets include the shapes people actually build — triangles, chevrons, arrows, stars, message bubbles and diagonal cuts — and every one stays editable after you apply it.

Key features of the Clip Path Generator

Draggable points

Every polygon point can be moved, added or removed, with the CSS updating as you drag.

All four shape functions

polygon, circle, ellipse and inset — the last with its own corner radii.

Previewed over an image

A shape is only judgeable against real content, so the preview clips a photograph rather than a coloured box.

Percentages by default

So the shape scales with the element and survives a responsive layout.

Editable presets

Triangles, chevrons, arrows, stars, message bubbles and diagonal cuts, all adjustable after you apply them.

How to use the Clip Path Generator

  1. 1

    Pick a shape function

    Polygon, circle, ellipse or inset — or start from a preset.

  2. 2

    Drag the points

    Each point is draggable, and points can be added or removed.

  3. 3

    Check the preview

    The shape is applied to a real image, so the cut is visible.

  4. 4

    Copy the CSS

    The clip-path declaration, with percentages that scale with the element.

Frequently asked questions

No. The element keeps its full size in the layout and the clipped-away parts are simply not painted. That also means the invisible area is genuinely gone — it cannot be clicked.

Reviews of the Clip Path Generator

What people who use the Clip Path Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Clip Path Generator. It takes half a minute and no account.

Write the first review

More developer tools