CSS Clip-Path Generator
Create custom CSS clipping shapes using polygons, circles, ellipses, and inset paths. Adjust shapes visually, preview the result, and export the CSS for your website.
Visual Shape Canvas
Drag the control points or select a preset to sculpt your shape.
CSS Shape Preview
Pinatool
Shape Type
Presets
Vertices (6)
CSS Code
Copy this rule to apply the clipping mask to any HTML element or image.
.clipped-element {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}How Our Clip-Path Generator Works
Create responsive vector-like masks in three intuitive steps.
Pick Shape Type or Preset
Choose between custom polygon, circle, ellipse, or inset shapes, or kick off your design with presets like triangles, stars, and hexagons.
Sculpt Points and Dimensions
Drag the control handles directly across the stage, nudge with arrow keys, or input exact percentages to fine-tune each vertex and radius.
Preview & Copy CSS
Load a local photo to test the mask on real media, then copy the generated CSS snippet directly into your stylesheet.
Key features
Create and customize CSS clipping shapes for images, cards, and UI containers.
Interactive Drag Handles
Freely drag vertices with touch or mouse, use keyboard arrows for fine percentage adjustments, and add up to 12 polygon points.
Local Image Testing
Load any local image into the stage to see how your mask frames photos, banners, avatars, and hero cards.
Local Browser Processing
Your files and settings are processed locally in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Common questions about CSS clip-path shapes, browser support, and responsive percentage coordinates.
What is the CSS clip-path property?
The CSS clip-path property creates a clipping region that sets what part of an element is visible. Everything inside the clipping path is displayed, while regions outside the boundary are completely hidden.
Are the generated percentage coordinates responsive?
Yes. By using percentage coordinates (% rather than fixed pixels), the clipping mask automatically scales proportionally with the dimensions of whatever HTML element or image container it is applied to.
How do I add or delete vertices on a polygon?
Click the "+ Add Vertex" button to insert a new vertex along the longest edge of your shape. To remove a point, click the trash icon next to that point coordinate in the sidebar (polygons require at least 3 points).
Does the preview upload my custom image to any server?
No. Your files and settings are processed locally in your browser and are not uploaded to Pinatool’s servers.
Which browsers support CSS clip-path?
CSS clip-path basic shapes are supported in current versions of major browsers, including Chrome, Edge, Safari, and Firefox. Check compatibility if you need to support older browsers.
Explore More Design Tools
Complementary utilities for CSS styling, color generation, and vector graphics.