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.
The CSS clip-path property is a powerful tool for cutting elements into any desired shape. Using the polygon() function, you can create arbitrary polygons such as triangles, pentagons, stars, and arrows using pure CSS. Since each vertex is specified as a percentage (%), it works responsively regardless of the element's size. The ability to create complex shapes without SVG is advantageous in terms of performance and code conciseness.
Clip-path is commonly used to style section dividers as diagonal or wavy shapes, or to mask images into unique forms like hexagons or diamonds. Finishing the bottom of a hero section with a triangle gives the page a dynamic flow. It also allows you to implement UI decorative elements such as badges, labels, and ribbons using only CSS without images, making maintenance easier.
When used with CSS transitions, clip-path can create smooth morphing animations. However, the number of polygon vertices must be the same in the start and end states for a smooth transition. Since clip-path animations leverage GPU acceleration, they perform well when used alongside transform or opacity. It is supported in all major browsers except Internet Explorer and works reliably in mobile environments.