Create beautiful CSS shapes visually and get the code to use in your projects. Customize shapes with our interactive editor.
Click on any shape to load it into the editor:
The clip-path CSS property creates a clipping region that sets what part of
an element should be shown. Parts that are inside the region are shown, while those
outside are hidden.
.circle {
clip-path: circle(50% at 50% 50%);
}Creates a circular clipping region.
clip-path: circle(40% at 50% 50%);Creates an elliptical clipping region.
clip-path: ellipse(40% 25% at 50% 50%);Creates a polygon clipping region.
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);Creates a rectangle clipping region.
clip-path: inset(10% 20% 10% 20% round 10px);The clip-path property is supported in all modern browsers. For older
browsers, you might need to use vendor prefixes or fallbacks.
For the best compatibility, consider using simple shapes and providing fallbacks for
browsers that don't support clip-path.
Remember that content inside a clipped element will still follow the normal flow. Text might be cut off if it extends beyond the clipping region.
Use percentage values for responsive designs that adapt to different screen sizes.
Combine clip-path with transform,
transition, and animation for interesting effects.
Provide fallbacks for browsers that don't support clip-path.
Complex shapes with many points might affect performance, especially when animated.
Always test your shapes across different browsers to ensure consistent appearance.