CSS Clip Path Maker

Visually create `clip-path` CSS properties for various shapes. Drag points to customize, see live results, and generate the CSS code.

Polygon Circle Ellipse Inset

Upload Image:

Background Color (No Image):

Reference Grid: px

For polygon snapping.

Click on the preview area to add points. Drag points to move them.

Radius: %

Position X: %

Position Y: %

Radius X: %

Radius Y: %

Position X: %

Position Y: %

Top: %

Right: %

Bottom: %

Left: %

Border Radius: %

Generated CSS:

Select Shape Type: Choose between "Polygon", "Circle", "Ellipse", or "Inset" using the radio buttons.
Customize Your Image/Background:
- Upload Image: Click "Upload Image" to use your own picture for the clip path preview.
- Background Color: If no image is uploaded, you can select a background color using the color picker to see the clip path effect.
Manipulate the Shape:
- For Polygon: Click anywhere on the preview area to add new points. Drag existing small red circles (points) to reshape the polygon. Use "Add Point", "Remove Last", or "Clear All" buttons for precise control.
- For Circle, Ellipse, and Inset: Adjust the numerical values in their respective control panels (e.g., Radius, Position, Top/Right/Bottom/Left offsets, Border Radius). You can also drag the red control points on the SVG preview to visually adjust these values.
Reference Grid: Use the "Reference Grid" input to add a grid overlay on the preview for easier alignment, especially for polygon points.
View Generated CSS: As you adjust the shape, the "Generated CSS" textarea will automatically update with the corresponding `clip-path` property.
Copy Code: Click the "Copy Code" button to quickly copy the generated CSS to your clipboard.
Reset: Click "Reset All" to revert all settings and the shape to its default polygon state.

Experiment with different shapes and values to create unique visual effects for your web elements!