Drag the white dots to reshape the polygon. Double-click a dot to remove it.
PRESETS
Frequently asked questions
What is clip-path used for?
clip-path is a CSS property that clips an element to a shape, such as a polygon, circle or ellipse. It is commonly used for diagonal section dividers, shaped images and creative buttons without image files.
Does the generated CSS work in all browsers?
clip-path with polygon, circle, ellipse and inset values is supported by all modern browsers, including Chrome, Edge, Firefox and Safari. No prefixes are needed for current versions.
Can I animate the shapes?
Yes. CSS transitions on clip-path work when the start and end shapes have the same number of polygon points, so keep point counts matched if you plan to animate.
Preview
Related free tools
Free CSS Button Generator | Style Buttons Online
Free CSS button generator. Customize colors, padding, and radius with live preview, then c
Free HEX RGB HSL Color Converter
Free color converter. Convert between HEX, RGB and HSL instantly, preview the color and co
Free Color Contrast Checker | WCAG Accessibility Tool
Free color contrast checker. Test text and background colors against WCAG AA and AAA stand