IconVault logoIconVault
Sign in

Clip Path Generator - Free Online CSS Shape Tool | IconVault

Build CSS clip-path shapes with a draggable polygon editor and copy the code. Free, runs fully in your browser.

All tools

Clip Path Generator

Draw CSS clip-path shapes visually and copy the code

5 of 5 free uses left

Shape

Polygon presets

On the canvas: click empty space to add a point, drag points to move them, right-click a point to delete it (minimum 3 points).

5 of 5 free copies left.

3 points

CSS output

clip-path: polygon(50% 5%, 95% 95%, 5% 95%);

About this tool

IconVault's Clip Path Generator lets you draw custom clip-path shapes with a draggable polygon editor instead of hand-writing coordinates. Add and move points over a live preview, then copy the generated CSS polygon() code straight into your stylesheet. It is free and runs fully in your browser.

Clipped shapes are a staple of modern web design: angled hero sections, hexagon avatars, speech bubbles and image masks. The visual editor makes it easy to experiment until the shape looks right, and the generated CSS uses percentage coordinates so the shape scales with the element. Trial use is recorded only when you copy the CSS.

Frequently asked questions

Popular searches

clip path generatorcss clip path generatorclip path makerclip-path polygon generatorcss shape generatorclip path css toolcss clip path editorpolygon clip path generatorclip path onlinecss mask generatorclip-path css shapescss hexagon clip pathclip path triangle csscss clip path examplesclip path generator online freedraw clip path visuallycss polygon makerclip path code generatorcss clip path hero sectionangled section clip path cssclip path image csscss clip path circlecss clip path ellipseclip path animation csscss shapes generatorclip-path polygon toolgenerate clip path csscss clip path borderclip path button csscss clip path responsiveclip path percentage coordinatescss clip path cheat sheetclip-path vs maskclip path text csscss clip path arrowclip path badge cssspeech bubble clip path csscss clip path starclip path pentagon csscss clip path diamondclip path parallelogram cssclip-path inset generatorcss clip path wavyclip path divider csssvg vs css clip pathcss clip path generator with previewcopy paste clip path cssclip path coordinates findercss clip path playgroundfree clip path tool

More tools

Font Pairing

Curated heading and body font pairs with live preview

Font Preview

Preview 200+ Google Fonts with your own text

Glassmorphism Generator

Design frosted glass cards and copy the CSS

Gradient Text

Gradient headlines with live preview and CSS

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →