Skip to content
M2TOOLKIT

Popular tools

Menu

CSS Clip-Path Generator

Cut images and elements into custom shapes with CSS.

  • Free
  • No sign-up
  • Runs in your browser

or drag and drop it here

Drag the points to reshape. Double-click the image to add a point; double-click a point to remove it.

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the CSS Clip-Path Generator

  1. Choose a shape preset.
  2. Drag points to adjust, double-click to add or remove points, or try your own image.
  3. Copy the clip-path CSS.

What does this tool do?

clip-path hides everything outside a shape, so you can make hexagonal avatars, slanted section edges or star badges without editing images. Percent coordinates keep the shape responsive. It's supported in all modern browsers.

Why use it?

  • 15 presets.
  • Drag-and-drop points.
  • Preview on your image.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the css clip-path generator.