CSS Clip Path Generator
clip-path: circle(50% at 50% 50%);
What is CSS Clip Path Generator?
CSS clip-path is a powerful property that clips an element to a specific shape, hiding everything outside that shape. This free Clip Path Generator helps web developers and designers create complex clipping masks without writing code manually. You can clip elements to circles, ellipses, insets (rectangles with optional rounded corners), and various polygon shapes like triangles, pentagons, hexagons, stars, arrows, and more. The clip-path property is commonly used for creating unique image shapes, hover effects, creative section dividers, and decorative UI elements. Our generator provides real-time preview so you can see exactly how your clip-path will look. For circle and ellipse shapes, you can customize the radius and position. For inset shapes, you can adjust all four sides and add rounded corners. Polygon shapes offer preset options for common geometric forms. The generated CSS code is compatible with all modern browsers.
How to Use This Tool
Select a shape type from the available options (circle, ellipse, inset, or polygon presets)
For circle: adjust the radius and position (X, Y) to control size and placement
For ellipse: set horizontal and vertical radii separately, plus position
For inset: adjust top, right, bottom, and left values to crop the element, add border radius for rounded corners
For polygon shapes: choose from preset shapes like triangle, star, hexagon, or arrow
Watch the live preview update as you customize your clip-path
Copy the generated CSS code and apply it to your elements
Features
- Create CSS clip-path with circle shape and custom radius
- Generate ellipse clip-path with adjustable radii
- Build inset clip-path with rounded corners
- Use preset polygon shapes: triangle, pentagon, hexagon, star
- Arrow and chevron shapes for directional elements
- Real-time preview updates as you adjust settings
- One-click copy clip-path CSS code
- Free to use - no signup required
Frequently Asked Questions
- What is CSS clip-path and how does it work?
CSS clip-path is a property that creates a clipping region to define which parts of an element are visible. Anything outside the clipping path is hidden. It supports basic shapes like circle(), ellipse(), inset(), and polygon() for custom shapes. For example: clip-path: circle(50% at center) creates a circular mask.
- How do I create a circular image with CSS clip-path?
To create a circular image, use clip-path: circle(50% at 50% 50%). The first value (50%) is the radius, and "at 50% 50%" positions the center. For a full circle on a square image, use 50% radius. You can also use border-radius: 50% as an alternative for circular images.
- What is the difference between clip-path circle and ellipse?
clip-path: circle() creates a perfect circle with one radius value. clip-path: ellipse() creates an oval shape with two radius values - one for horizontal (X) and one for vertical (Y). Use circle for round shapes and ellipse when you need an oval or stretched circular shape.
- How do I create a triangle with CSS clip-path?
To create a triangle, use clip-path: polygon(50% 0%, 0% 100%, 100% 100%). This creates a triangle pointing up. The three coordinate pairs define the three points of the triangle. Adjust the percentages to change the triangle shape and direction.
- Can I animate CSS clip-path?
Yes, CSS clip-path can be animated using CSS transitions or keyframe animations. The shapes must have the same number of points to animate smoothly. For example, you can transition a circle radius on hover: transition: clip-path 0.3s ease. This creates engaging reveal and morph effects.
- Is CSS clip-path supported in all browsers?
CSS clip-path has good support in all modern browsers including Chrome, Firefox, Safari, and Edge. Basic shapes (circle, ellipse, inset, polygon) work everywhere. For older browsers, you may need the -webkit-clip-path prefix for Safari. IE does not support clip-path.