Edit the value directly to fine-tune the shape.
Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
5.0
1 rating
- 5 stars 1
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the CSS Clip Path Generator
Preview clipping shapes and edit the CSS clip-path value.
- 1 Choose a Shape from the menu.
- 2 Edit Clip path value directly to refine its geometry.
- 3 Copy the generated CSS and test it on your element.
Example and practical tips
Use a polygon preset to turn a rectangular decorative panel into an angled shape.
Frequently asked questions
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.
Practical guides
-
How to Use CSS Clip Path Generator
Create CSS clip-path shapes visually: polygons, circles, ellipses and insets. Edit the values, preview the shape live and copy the CSS. Free generator.
Report an issue
Something broken or not quite right? Tell us and we will look into it.