A CSS clip-path generator lets you create geometric clip shapes for HTML elements without writing coordinates manually. Choose polygon, circle, ellipse, or inset shapes — adjust the controls — and get production-ready clip-path CSS that works in all modern browsers.
Shape Type
Polygon Presets
Live Preview
CSS Output
How to Use the CSS Clip-Path Generator
CSS clip-path lets you hide parts of an element outside a defined shape — perfect for image cutouts, diagonal section dividers, and decorative layouts. This free CSS clip-path generator provides visual controls for all four shape types with live preview.
Step 1: Choose a Shape Type
Select from four shape types: Polygon (custom multi-point shape), Circle (perfect circle with adjustable radius), Ellipse (oval with separate X/Y radii), or Inset (rectangle with optional rounded corners). The controls update to match the selected shape.
Step 2: Use Polygon Presets
For polygon shapes, click a preset to instantly load common shapes: triangle, parallelogram, pentagon, hexagon, chevron, arrow, and more. Each preset defines the polygon point coordinates. You can then edit the individual point sliders to customize the shape.
Step 3: Adjust the Controls
For circle: set the radius and center X/Y position using percentage sliders. For ellipse: set separate horizontal and vertical radii. For inset: set top, right, bottom, left offsets and an optional border-radius for rounded inset corners.
Step 4: Copy the CSS
Click Copy CSS to copy the complete clip-path declaration. Apply it to any element in your stylesheet. For image effects, apply it to an <img> tag directly.
FAQ
Is this CSS clip-path generator free?
Yes, completely free with no limits or account required. All shape rendering and CSS generation happen locally in your browser.
What is CSS clip-path?
The CSS clip-path property clips an element to a specific shape, hiding anything outside the shape. It supports polygons, circles, ellipses, and inset rectangles. It's used for image shapes, decorative sections, and creative layouts.
What is the difference between clip-path and mask?
clip-path uses geometric shapes (polygon, circle, ellipse) to clip content. CSS mask uses image or gradient masks for more complex masking patterns. clip-path is simpler to write and has better performance for basic shapes.
How do I create a triangle with CSS clip-path?
Use polygon with three points: clip-path: polygon(50% 0%, 0% 100%, 100% 100%). This creates an upward triangle. Change the values to rotate or flip the triangle direction.
Can I animate clip-path shapes?
Yes! CSS transitions and animations work with clip-path as long as both shapes use the same type and number of points. You can animate between two polygon shapes, for example, to create shape morphing effects.
What percentage values mean in clip-path?
Percentage values in clip-path are relative to the element's bounding box. 0% 0% is the top-left corner, 100% 100% is the bottom-right. You can mix percentages and pixel values.
Does clip-path work in all browsers?
Yes, clip-path with polygon/circle/ellipse/inset shapes has full support in all modern browsers. Older browsers may need the -webkit-clip-path prefix, but all browsers released after 2017 support the standard syntax.