Clip Path Maker

Clip elements into any shape

The CSS clip-path property hides everything outside a shape you define, letting you cut an element into a polygon, a circle or a complex custom form. This maker lets you build that shape visually by placing points and gives you the clip-path value, so you can crop images and elements into non-rectangular shapes without ever touching an image editor. The source asset stays untouched while the shape lives entirely in your CSS.

Why clip-path beats cropping the image

Cropping an image in an editor bakes the shape permanently into the file; clip-path applies the shape in CSS instead, so the same untouched image can be cut differently in different contexts and the original always stays intact. It also works on any element, not just images, and the shape stays fully responsive as the element resizes. Defining a polygon by typing out coordinate pairs by hand is painful and error-prone, which is exactly why a visual maker matters so much here.

Copy the clip-path value

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.