← Back

CSS Clip-Path Generator

CSS clip-path allows you to make shapes by clipping elements to specific regions. This tool lets you visually create and edit those shapes by dragging points, or choose from dozens of predefined shapes like stars, hexagons, polygons, circles, and ellipses.

Canvas Background
💡 Tip: Click on the dashed border line to add a new point. Double-click a handle point to delete it (minimum 3).
Predefined Shapes
Adjust Dimensions
Points: 3 vertices
P1X: 50%Y: 0%
P2X: 0%Y: 100%
P3X: 100%Y: 100%

How to use

  1. Select a starting shape from the presets panel (e.g., Triangle, Star, Hexagon, Circle).
  2. Drag the handles on the preview canvas to customize the coordinates and dimensions.
  3. Choose a background preview option (gradient, pattern, picture, or custom image URL).
  4. Copy the generated CSS code or copy a shareable link to save your shape configuration.

FAQ

What is the CSS clip-path property?

The clip-path CSS property creates a clipping region that sets what part of an element should be visible. Parts that are inside the region are shown, while those outside are hidden.

Are the coordinates responsive?

Yes! The generated coordinates use percentage units (e.g., 50% 0%), meaning the shape will dynamically adapt and scale to the dimensions of any element it is applied to.

Can I use this in all browsers?

Yes, clip-path is widely supported in all modern browsers (Chrome, Firefox, Safari, Edge). Some very old browsers might need the -webkit- prefix, but modern versions support the standard property.