CSS Clip-path Generator
Build a polygon visually, refine its percentage coordinates and copy the CSS. Try the shape with a local image, export an SVG silhouette or save a clipped PNG.
1. Shape & points
Numbered buttons select a point. X/Y range from 0–100% of the shape box. New points are inserted after the selected point. Keep at least three; up to 50 geometry edits can be undone.
Using solid fill. Images use centered fill cropping.
A project stores points, output dimensions and fill color. Restoring one clears the optional image; images are not included in project files.
2. Edit & preview
Drag a numbered handle. Focus the editor to move the selected point with arrow keys; hold Shift for 5% steps. Delete removes it. The faded area helps you see what the shape clips away.
Apply the clip-shape class to your element. Percentages scale with its border box; changing its aspect ratio changes the shape. CSS clips all content in that element. SVG contains the solid shape only; PNG includes the optional image. Exports omit editor handles.
PNG/SVG dimensions: 256–2,400 whole pixels per edge. Local images: up to 16 million decoded pixels and 16,000 pixels per edge. Coordinates round to two decimals. Self-crossing polygons use the nonzero fill rule. No processing upload or saved project history; download JSON to keep the shape. Website ads and analytics follow the privacy information.
Using CSS Clip-path Generator
Build a responsive polygon clip path visually, refine its percentage coordinates and export the shape for a web design or image workflow.
- Choose a starting shape, then drag its handles or edit each point’s X/Y percentage.
- Insert or remove points, use Undo, or focus the editor and adjust the selected point with arrow keys. Optionally open a local image for a centered crop preview.
- Copy the CSS or download CSS, a solid SVG shape, clipped PNG or reusable JSON project.
Example
Choose Diamond and a square output to create a clipped photo. Select a point by its numbered button. Focus the editor; arrows move1%, Shift + arrows move5%, and Delete removes it.
Questions & answers
What does clip-path do?
It defines which parts of an element remain visible. This tool exports polygon() with percentage coordinates referenced to the element’s border box. Apply the clip-shape class to your element. Clipping affects all its content.
How do I add or remove a point?
Insert midpoint adds between the selected point and its next neighbor. In click-to-insert mode, click inside the editor’s shape box to add after the selected point. A row’s remove button or Delete in the focused editor removes a point, keeping at least3.
Can I edit without dragging?
Yes. Edit labeled X/Y number fields or select a point with its numbered button, focus the editor and use arrow keys. Arrows move1 percentage point, Shift moves5, and Delete removes the selected point.
What does Undo restore?
Up to 50 geometry edits: point moves, additions, removals and preset/project changes. It restores points and selection, not image files, output dimensions or fill color.
Why does the shape stretch on a different element?
Percentages scale separately with width and height. An element with another aspect ratio produces another shape proportion. Match the preview’s width/height ratio when you want the same result.
Do CSS and SVG contain my photo?
No. CSS contains the polygon clipping rule. SVG contains a solid-color silhouette with the selected output dimensions. Only clipped PNG includes an optional local image, fitted with centered fill cropping.
Can I restore a project?
Yes. This tool’s version1 JSON stores points, dimensions and fill color. Restoring clears the optional image, which is not embedded. Keep your photo separately. Files allow64 KiB and 20,000 text characters.
What happens with crossing edges?
Preview and exports use the nonzero fill rule. Crossed edges may create unexpected filled regions; a warning helps you notice crossings, but does not prohibit them.
What are the limits?
3–40 points, coordinates0–100% rounded to two decimals, and PNG/SVG output256–2,400 whole pixels per edge. Local JPG/PNG/WebP files are up to 20 MiB and 16 million decoded pixels, with 16,000 pixels per edge.
Are images uploaded or projects saved?
No processing upload or saved project history is needed. Download JSON to keep a shape. Website ads and analytics follow the privacy information.
Related tools
A useful next step for your task.
Developer & DataCSS Gradient GeneratorCreate linear, radial and conic gradients with editable color stops, positions, opacity and presets. Copy CSS or export a PNG and settings JSON.
Developer & DataCSS Box Shadow & Border Radius GeneratorDesign layered inset and outer box shadows, four corner radii, borders and colors with live previews. Copy or download CSS in pixels or rem units.
Developer & DataSVG OptimizerOptimize SVG icons and logos locally with SVGO. Compare artwork, preserve viewBox and accessibility, edit source, choose optimization profiles and…
Images & DesignImage Crop, Rotate & Edit ToolCrop images at original resolution with exact pixel coordinates, touch selection and undo. Rotate without clipping, flip, frame and export PNG,…
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.