CSS Clip-Path Generator

Create complex and custom shapes for your web elements using CSS clip-path property.

Select Shape Type:

Image URL (optional):

Polygon Points (e.g., 50% 0%, 100% 100%, 0% 100%):

Radius (e.g., 50%):

Position (at x y, e.g., at 50% 50%):

Radii (rx ry, e.g., 25% 40%):

Position (at x y, e.g., at 50% 50%):

Inset Values (top right bottom left, e.g., 10% 20% 30% 40%):

Round Corners (optional, e.g., round 10px):

CSS

HTML

Generate a clip-path to see its CSS code.

Generate a clip-path to see its HTML code.

Copied!