Free tool

Clip Path Maker

Crop any element with clip-path: pick a shape, drag the vertices and copy the exact code.

Drag the points over the image.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

The clip-path property crops an element to a geometric shape: everything outside the defined area becomes transparent. It's the standard technique for diagonal angles, hexagonal cards, stars, arrows or custom-silhouette images without touching Photoshop. This generator gives you the most common shapes already computed (triangle, diamond, pentagon, hexagon, star, chevron, arrow, speech bubble, cross) plus a free editor where you drag each vertex over the preview to get your own silhouette; values are always expressed in percentages, so the result is fully responsive.

Features

  • ✓10 ready-to-use preset shapes
  • ✓Draggable vertices over the preview
  • ✓Custom mode with unlimited points
  • ✓Circle and ellipse with percentage controls
  • ✓100% in browser, no sign-up

How to generate a clip-path?

  1. 1

    Pick a base shape

    Start from a preset or from custom mode.

  2. 2

    Drag the points

    Adjust each vertex on the preview or add more.

  3. 3

    Apply the style

    Paste "clip-path: ..." on the element you want to crop.

  4. 4

    Verify responsiveness

    Since percentages are used, the shape scales with element size.

Frequently asked questions

Does clip-path affect layout?

No. The element still occupies its original space; only what's painted outside the shape is hidden. If you need the rest not to take space, combine clip-path with adjusted dimensions or margins.

Does it work with images and videos?

Yes, clip-path works on any HTML element: images, videos, iframes, text or gradients. Percentages keep the shape proportional regardless of content.

Why use percentages instead of pixels?

Percentages are relative to the element's own size, so the shape automatically adapts to mobile, tablet and desktop without media queries.

Related tools

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

CSS Gradient Generator

Linear, radial and conic gradients with presets.

Photo Editor

Filters, crop and adjustments.

Image Resizer

Batch resize, download as ZIP.

Embed Clip Path Maker on your site

Add Clip Path Maker to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/clip-path-maker"
  width="100%"
  height="700"
  frameborder="0"
  title="Clip Path Maker — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub