Site icon Puneet Sharma – Freelance Web Developer

CSS clip-path generator tool

CSS clip-path generator tool
Screenshot of the CSS clip-path generator tool

Check out this cool online CSS tool to create clippings of any shapes you like and use it in your CSS code for desired results. Also, check the demos below where I created some clippings using this tool. Bookmark/save this online tool to get you quick results in the future as well.

Open Tool


DEMO

Open this demo in a full window – https://demos.webdevpuneet.com/css/clipping/index.html

Default shapes that can be created using this tool

Shapes that can be created using this tool

Upload your image

The clipped part shows up when you hover over the image so you do not miss those important points you want to show up.

CSS clip path generator tool – screenshot

Not only this you can click and drag clip points to create custom shapes of your own and specifically customized to your image like the example below.

Screenshot – demonstrating custom clip path creation

Custom Polygon Setting

With the ‘custom polygon’ setting, you can add any number of points to create your desired clip according to the image and your requirement.

Screenshot demonstrating custom polygon setting

Add as many draggable points as you want:

Tool Screenshot with custom polygon settings – adding draggable clip points

If you think the height of the canvas is too short you can just click-hold and drag it downwards from here to increase the height of the view area and then upload your image again like in the example below.

Screenshot showing the click-draggable point to increase view area for larger images

Tool Link – https://tools.webdevpuneet.com/css-clip-path-generator/

Exit mobile version