What is CSS Clip-path?
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.
It allows you to "cut out" specific shapes from images or containers.
Historically, non-rectangular layouts required complex PNGs or SVGs. Now, you can achieve shapes like triangles, polygons, and circles with a single line of CSS, fully responsive and ready for animation.
Supported Shapes
1. Polygon
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
The most flexible function. Define a custom polygon by specifying a series of x y coordinates. Minimum 3 points.
2. Circle
clip-path: circle(50% at 50% 50%);
Defines a circle using a radius and a center position. Syntax:
circle(radius at x y).
3. Ellipse
clip-path: ellipse(25% 40% at 50% 50%);
Similar to a circle, but allows you to specify separate horizontal and vertical radii.
4. Inset
clip-path: inset(10% 20% 10% 20%);
Defines an inset rectangle. You specify distance from the top, right, bottom, and left edges.
Common Use Cases
-
1
Creative Avatars: Display user profile pictures in hexagons, stars, or hearts instead of standard squares or circles.
-
2
Angled Backgrounds: Create dynamic section dividers with diagonal lines using simple polygon clips.
-
3
UI Animations: With CSS Transitions, you can morph between shapes (e.g., a square becoming a circle) for engaging effects.
FAQ
Is clip-path supported in all browsers?
clip-path. In
very old browsers (like IE), the property is ignored, and the element will show as a standard
rectangle (graceful degradation).
Does clipping actually remove the element?
How can I add a border to the clipped shape?
drop-shadow filter or layer a slightly larger element behind the main one.
Can I clip text?
clip-path applies to the container. If you want to clip the background to the
text (text mask), use background-clip: text.
Can I use the generated code directly?
Is this tool free?
More Free CSS Tools
CSS Gradient Generator
Create beautiful linear and radial CSS gradients visually.
Box Shadow Generator
Design smooth, layered CSS box-shadows instantly.
Glassmorphism Generator
Generate popular Glassmorphism CSS effects easily.
RGB/HEX Converter
Convert colors between HEX, RGB, HSL, and CMYK formats.
Color Palette Generator
Extract dominant colors and palettes from any image.
Image Converter
Convert images to WebP, JPG, or PNG locally in browser.