Create CSS clip-path shapes visually: polygons, circles, ellipses and insets. Edit the values, preview the shape live and copy the CSS. Free generator.
On this page
About this tool
Preview clipping shapes and edit the CSS clip-path value.
How to use CSS Clip Path Generator
Choose a Shape from the menu.
Edit Clip path value directly to refine its geometry.
Copy the generated CSS and test it on your element.
Worked example
Use a polygon preset to turn a rectangular decorative panel into an angled shape.
Does clipping resize the layout box?
It changes the visible region, not the underlying layout dimensions. Space around the element may remain.
Why did my custom shape disappear?
An invalid clip-path value or geometry outside the element can hide the content. Return to a preset and make smaller edits.
Explore CSS Tools · More practical guides
Personalize your experience. Open with Ctrl+U (Option+U on Mac). Preferences stay in this browser when storage is available.
Menu language English (USA) Español اردو Accessibility Profiles Custom settings Vision support Reading support Reduced motion Motor support Focus support Oversized widget
Screen Reader Contrast + Smart Contrast Highlight Links Bigger Text Text Spacing Pause Animations Dyslexia Friendly Cursor Tooltips Page Structure Line Height Text Align Dictionary Saturation
Read aloud assistance Uses browser speech voices to read page text or selected text. This is not a replacement for NVDA, VoiceOver or another full screen reader. Available voices and speech processing depend on your browser and device.
Read page Read selection Pause / resume Stop reading
Reset All Accessibility Settings Move / Hide Widget Widget positionBottom right Bottom left Hide widget for 1 hour Restore at any time with Ctrl+U (Option+U on Mac).
Accessibility statement and help