Drag points to create custom shapes — get CSS clip-path code instantly.
CSS Clip-Path Maker is a free online tool that creates custom CSS shapes by dragging control points on a visual canvas. Build polygons, stars, arrows, circles, and any custom shape, then copy the generated clip-path CSS code for use in your projects. The tool provides an interactive canvas where you can add, remove, and drag points to create any polygon shape. It includes preset shapes like triangles, pentagons, hexagons, stars, arrows, and crosses as starting points. The generated CSS clip-path property works with the polygon() function for maximum flexibility. CSS clip-path is a powerful property for creating non-rectangular elements without images. It clips an element to a custom shape, hiding everything outside the defined path. This enables creative layouts, image masks, decorative elements, and unique UI components that stand out. Everything runs entirely in your browser. There are no usage limits and no account required. The generated CSS works in all modern browsers. Common use cases include creating hero section shapes, designing image masks, building decorative dividers between sections, creating unique button shapes, designing portfolio layouts, and adding visual interest to otherwise rectangular layouts. For related tools, check out the CSS Keyframes Builder for animations, the Gradient Generator for backgrounds, or the Glassmorphism generator for glass effects.