CSS Clip Path Generator
Create CSS clip-path shapes with visual editing and presets.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
How to Use the CSS Clip Path Generator
Choose a preset shape — circle, ellipse, triangle, pentagon, hexagon, octagon, star, cross, arrow — or create a custom polygon. Drag the control points on the preview to adjust the shape in real time. Fine-tune coordinates using the number inputs below. Click "Copy CSS" to grab the generated clip-path property.
Frequently Asked Questions
What is CSS clip-path?
clip-path is a CSS property that clips an element to a basic shape or SVG path. Only the area inside the shape is visible.
Which shapes does clip-path support?
clip-path supports circle(), ellipse(), polygon(), inset() and path() functions. This tool covers circle, ellipse and polygon.
Does clip-path work in all browsers?
clip-path with basic shapes is supported in all modern browsers. Older browsers may need the -webkit- prefix, which you can add manually.
Can I animate clip-path?
Yes — clip-path values can be animated with CSS transitions or keyframes as long as the shapes have the same number of points.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →