CSS Clip Path Generator
CSS Clip Path Generator — Choose a shape preset, preview the clipping effect and copy the CSS clip-path declaration. Processing runs in your browser.
CSS Clip Path Generator generates CSS from the controls shown below. Choose a shape preset, preview the clipping effect and copy the CSS clip-path declaration. Review the output before adding it to your page.
CSS Clip Path Generator is a free CSS Tools utility that runs entirely in your browser — nothing you enter is uploaded.
How to use CSS Clip Path Generator
- Choose a preset from Shape, such as Triangle, Circle or Star.
- Review the clipped sample in Preview.
- Check the generated clip-path declaration for the selected preset.
- Choose Copy and add the declaration to the CSS rule for your element.
About this tool
The Shape menu selects a predefined clip-path value. The preview applies that value to a sample element; this page does not provide freehand drawing or editing of individual polygon points.
The tool generates CSS locally from your chosen settings. It does not parse or modify a pasted stylesheet. Once the page and its scripts have loaded, generation can run without a network connection.
Frequently asked questions
What does CSS Clip Path Generator do?
Choose a shape preset, preview the clipping effect and copy the CSS clip-path declaration. The controls update the preview and CSS automatically.
Is CSS Clip Path Generator free to use?
The tool is free to use and requires no account or installation. Controls are limited to the ranges and presets shown.
Where are my settings processed?
The tool processes your selected settings in your browser; it does not send those settings to a server for generation. The site privacy and cookie pages describe its separate advertising and analytics services.
How do I apply the generated CSS?
Place the generated clip-path declaration inside your element's CSS selector. Its relative coordinates adapt to the size of that element.
Does CSS Clip Path Generator work on mobile?
The controls work in modern desktop and mobile browsers with JavaScript enabled. Test the copied CSS in the browsers and layout you intend to support.