Blog
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
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.
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.
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.
Add as many draggable points as you want:
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.
Tool Link – https://tools.webdevpuneet.com/css-clip-path-generator/
You must be logged in to post a comment.