CSS clip-path maker
Draw polygon masks with a preview and copyable CSS.
Zo gebruik je CSS clip-path maker
CSS clip-path maker turns a list of x,y percentage points into a clip-path: polygon() rule and shows it applied to a gradient box. Enter 3 to 50 points, one pair per line, with each coordinate between 0 and 100. The default four points form a trapezoid, and the generated declaration can be copied straight into a stylesheet.
- Enter the requested values in the settings panel.
- Set polygon points (% x,y; one pair per line).
- Run css clip-path maker, review the output, then use the available copy or download controls.
Functies van dit hulpmiddel
Draw polygon masks with a preview and copyable CSS.
- Polygon points (% x,y; one pair per line)
- Set this value for your task.
Limieten en verwerking
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.
Veelgestelde vragen
How do I make a triangle with CSS clip-path?
Enter three points on separate lines: 50,0 then 100,100 then 0,100. The tool outputs clip-path: polygon(50% 0%, 100% 100%, 0% 100%); which clips the element to an upward-pointing triangle that scales with its size.
Can I use pixel values in the clip-path maker?
No. Each coordinate is read as a percentage of the element's width or height and must be between 0 and 100; anything else returns an error. Percentages keep the shape proportional when the element resizes.
Does the clip-path maker support circle() or ellipse()?
No. It only generates polygon() shapes. You can approximate a circle with many points, up to the 50-point limit, or write a circle() value yourself after copying the polygon rule.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.