The CSS clip-path property clips an element to a specific shape. Everything outside the clip region is hidden. Unlike overflow: hidden, which only clips to a rectangle, clip-path supports circles, ellipses, polygons, and even SVG path shapes. It is used for decorative section dividers, image masks, hover effects, and complex UI shapes.
Clip Path Shape Functions
The circle function clips the element to a circular shape. circle(50% at 50% 50%) creates a circle with a 50% radius centered on the element. Adjusting the center position and radius changes the circle's size and position within the element.
The ellipse function creates an elliptical clip. ellipse(50% 30% at 50% 50%) creates an ellipse wider than it is tall.
The polygon function is the most flexible. It accepts a list of X Y coordinate pairs defining the vertices of the polygon. polygon(0 0, 100% 0, 100% 80%, 0 100%) creates a shape with a diagonal bottom edge, commonly used for hero section dividers.
The path function accepts any SVG path data, enabling arbitrary curves and complex shapes.
The inset function clips to a rectangle with optional rounded corners. inset(10px 20px round 8px) clips inward from each edge with rounded corners.
Common Use Cases
Section dividers: a diagonal or curved bottom edge on a section background is created by applying a polygon clip-path with a diagonal bottom edge. The content below the divider appears to slide under the clipped edge.
Image masks: applying clip-path to an img element crops it to any shape. A hexagonal avatar image, a diagonal banner image, or a circular crop are all done with clip-path.
Hover reveals: clip-path is animatable in CSS. Transitioning from a small circle to a full-element circle (using circle()) creates a radial reveal effect on hover.
Decorative backgrounds: clipping a colored div to a polygon creates shape-based background accents without images.
Browser Support
All modern browsers support the basic clip-path shape functions. The path function has slightly less consistent support across older versions. CSS clip-path animations work in most modern browsers with CSS transitions.
Using the DevHexLab Clip Path Generator
Open the tool at /tools/css/clip-path-generator. Choose the shape type. Drag the handles to reshape the clip region on the preview element. The CSS clip-path property value updates live. Copy it when the shape is correct.
Frequently Asked Questions
Does clip-path affect layout?
No. clip-path clips the visual rendering of the element but does not change its layout box. The space the element occupies in the flow is unchanged.
Can I use clip-path with images?
Yes. Applying clip-path to an img element clips the displayed portion of the image. The image file itself is not modified; only the visible area changes.
Create any shape with clip-path and copy the CSS instantly.