Online CSS Clip-Path Generator

Create complex shapes and masks for your website using the CSS clip-path property. Drag the points on the image to visually design triangles, polygons, stars, and abstract shapes without writing a single line of code.

The clip-path property allows you to hide specific parts of an element. Everything inside the path is visible, while everything outside is hidden. It is fully responsive and performant.

The Polygon Function

We use polygon(x y, x y, ...) to define shapes. Each pair of numbers represents a coordinate (from 0% to 100%) on the X and Y axes. You can add as many points as you need to create intricate designs.

High Performance

Unlike masking with PNG images (which are heavy), CSS shapes are lightweight vectors. Browsers render them using the GPU, ensuring smooth 60fps animations and faster page loads.

Interactive Editor

Design visually. Simply drag the handles on our canvas to adjust the shape. You can toggle between a gradient or a real image background to see how your clip-path affects content.

Frequently Asked Questions

Can I animate the shape?

Yes! You can transition between two clip-paths using CSS transitions or keyframes. Important: Both shapes must have the exact same number of points for the animation to work smoothly.

How do coordinates work?

The top-left corner is 0% 0%. The bottom-right is 100% 100%.

X moves left-to-right. Y moves top-to-bottom.

Clip-Path Maker

Presets

Pro Tip

Is this tool broken?