Create polygon clip paths with drag-and-drop and generate CSS code automatically. Various presets including triangle, hexagon, star, and more.
Drag points to modify the shape. Click on edges to add points, right-click points to remove.
clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%);
Choose from built-in shape presets (triangle, hexagon, star, etc.) or select 'Custom' to start from scratch.
Drag the white circular points to freely modify the shape. Each vertex of the polygon can be precisely adjusted.
Click on the edges of the shape to add new points. Right-click (or long-press on mobile) existing points to delete them.
Once you've created your desired shape, click 'Copy Code' to copy the CSS clip-path code to your clipboard and apply it directly to your project.
Create unique layouts by designing section dividers with polygons or curves instead of straight lines. For example, finishing the bottom of a hero section with a triangular pattern gives a dynamic feel.
Crop profile photos or product images into unique shapes like hexagons or diamonds to increase visual interest. Using the same clip path for all images in a gallery layout maintains consistency.
Create unique UI elements using only CSS without icons, such as arrow-shaped buttons, star-shaped badges, or cross-shaped close buttons. Performance improves by using pure CSS instead of SVG.
border-radius rounds corners, but clip-path can cut elements into arbitrary polygon shapes. clip-path is much more flexible for creating complex shapes. For example, triangles, stars, and arrows are impossible with border-radius but easy with clip-path.
Add the copied clip-path code to your CSS class. Example: .my-element { clip-path: polygon(...); } This will clip the element to your defined shape. It works on any HTML element including images, divs, and buttons.
This tool is optimized for visual editing and only supports drag-and-drop. If you need precise coordinate input, copy the generated CSS code and manually edit it in a text editor. Each point is expressed as percentages (%), so adjust within the 0-100 range.
Yes, you can drag points on touchscreens. However, instead of right-clicking, you can long-press points to open the delete menu. Precise work is recommended on desktop, but basic editing is possible on mobile.
Yes, you can smoothly transform clip-path using CSS transitions. However, the starting and ending polygons must have the same number of points. Example: Add 'transition: clip-path 0.3s ease;' and apply different polygon values on hover to create morphing effects.
clip-path is not supported in Internet Explorer. However, it works perfectly in all modern browsers including Chrome, Firefox, Safari, and Edge. If IE support is needed, consider using SVG clipPath elements as an alternative or image-based masking techniques.
clip-path only visually clips the element and doesn't change the actual layout size. Therefore, even though the clipped area is transparent, it still occupies space. Adjust margin or padding to prevent overlapping with surrounding elements.