Shape Properties
Create custom shapes with clip-path
Circle Settings
50%
Live Preview & CSS
See your shape in action
Live Preview
Clipped Shape
Generated CSS
.clipped-element {
clip-path: circle(50% at center);
}Clip Path Value
circle(50% at center)
Clip Path Tips:
• Use percentages for responsive shapes
• Polygon coordinates are x%, y% pairs
• Inset creates rectangular cutouts
• Circle and ellipse support positioning