With this tool, you can quickly design clip-paths for your images using 27+ preset shapes (circle, star, etc.) or customize them. (bookmark for quick reuse)
The inset() shape optionally allows values
similar to border-radius for rounded edges.
This new feature may be buggy in
your browser.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
The inset() shape optionally allows values
similar to border-radius for rounded edges.
This new feature may be buggy in
your browser.
CSS Clip Path Generator is a free online tool for web developers to create custom complex shapes (circle, ellipse, polygon, etc) for your element using CSS clip-path property.
The clip-path is a CSS property that creates a clipping region that sets what part of an element should be shown and other parts hidden. Parts that are inside the clipped region are shown, while that outside gets hidden.
You can create CSS shapes using clip-path property with background color, background image, background color gradients, and even animated background color gradients. checkout this article with examples.
It is recommended to bookmark it on your web browsers to quickly revisit and reuse it when needed for better productivity at work.
Follow these simple steps to get the best results with this tool.
Step 1 - Choose your image by clicking the input area.
Step 2 - Choose the spare from 25+ listed shapes from the shape panel. You can also custom start your clip points by selecting 'Custom Polygon'.
Step 3 - Click and drag clip points according to your needs and the nature of the image. You can see the hidden part of the image by hovering over the image so you get the idea of where to drag and set the clip points.
Step 4 - After you are satisfied with the clipping you can copy the code from the bottom panel and apply it to your CSS file.
Now, save this tool or bookmark it on your web browser to revisit it quickly when needed. Thank you!
webdevpuneet.com © 2021 | hosted by Bluehost (web hosting)