CSS Clip-Path Generator - Create Shapes Visually Online
Create CSS clip-path shapes with a visual drag-and-drop editor. Generate polygon, circle, ellipse, and inset clip paths with live preview.
Frequently Asked Questions
What is CSS clip-path?
CSS clip-path is a property that creates a clipping region to determine which parts of an element are visible. Anything inside the clipping shape is shown, and anything outside is hidden. It supports several shape functions: polygon() for arbitrary multi-point shapes, circle() for circular regions, ellipse() for oval regions, and inset() for rectangular regions with optional rounded corners. It is widely used for creating non-rectangular layouts, decorative section dividers, image masks, and creative UI elements.
How do I use this clip-path generator?
Select a shape type (Polygon, Circle, Ellipse, or Inset) from the tabs. For polygon, drag the control points on the canvas to shape your polygon, click on an edge to add new points, or select a preset shape as a starting point. For circle/ellipse, adjust the radius and center position using sliders or numeric inputs. For inset, set the top, right, bottom, and left inset values, and optionally add border-radius. See the live preview update in real-time as you make changes, then copy the generated CSS code with one click.
Is my data secure? Does anything get sent to a server?
Yes, your data is completely secure. This tool runs entirely in your browser using client-side JavaScript. No image data, shape configurations, or any other information is sent to any server. All computations happen locally on your device, ensuring total privacy. It is safe for proprietary design work and confidential projects.
What is the difference between percentage and pixel units?
Percentage (%) values are relative to the element's dimensions, making your clip-path responsive — it scales automatically as the element resizes. Pixel (px) values are absolute and fixed, meaning the clip-path stays the same size regardless of the element's dimensions. Use percentages for responsive designs (recommended) and pixels when you need exact fixed-size clipping regions.
Can I animate between clip-path shapes?
Yes, CSS clip-path shapes can be animated using CSS transitions and animations. The key requirement is that both the starting and ending shapes must use the same shape function (e.g., both polygon()) and have the same number of points. For example, you can smoothly transition a triangle into a different triangle, or morph a square into a diamond. Simply apply 'transition: clip-path 0.3s ease' to the element.
What preset shapes are available?
The tool provides a library of preset polygon shapes including: Triangle, Diamond, Pentagon, Hexagon, Octagon, Star, Arrow Right, Cross, Trapezoid, and Bevel. Each preset can be applied with one click and then further customized by dragging the control points to create your desired shape.
Which browsers support CSS clip-path?
CSS clip-path with basic shapes (polygon(), circle(), ellipse(), inset()) has been supported since January 2020 and works in all modern browsers: Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+. For older WebKit browsers, you may need the -webkit-clip-path vendor prefix. The feature is considered baseline and safe to use in production.
Code Examples
// CSS Clip-Path Generator - JavaScript Implementation
// Generate polygon clip-path from an array of [x, y] coordinate pairs
function generatePolygonClipPath(points) {
const coords = points
.map(([x, y]) => `${x}% ${y}%`)
.join(', ');
return `clip-path: polygon(${coords});`;
}
// Generate circle clip-path
function generateCircleClipPath(radius, centerX = 50, centerY = 50) {
return `clip-path: circle(${radius}% at ${centerX}% ${centerY}%);`;
}
// Generate ellipse clip-path
function generateEllipseClipPath(radiusX, radiusY, centerX = 50, centerY = 50) {
return `clip-path: ellipse(${radiusX}% ${radiusY}% at ${centerX}% ${centerY}%);`;
}
// Generate inset clip-path with optional border-radius
function generateInsetClipPath(top, right, bottom, left, borderRadius = 0) {
const inset = `${top}% ${right}% ${bottom}% ${left}%`;
if (borderRadius > 0) {
return `clip-path: inset(${inset} round ${borderRadius}%);`;
}
return `clip-path: inset(${inset});`;
}
// Common preset shapes
const PRESETS = {
triangle: [[50, 0], [100, 100], [0, 100]],
diamond: [[50, 0], [100, 50], [50, 100], [0, 50]],
hexagon: [[25, 0], [75, 0], [100, 50], [75, 100], [25, 100], [0, 50]],
star: [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
};
// Usage
console.log(generatePolygonClipPath(PRESETS.triangle));
// clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
console.log(generateCircleClipPath(40, 50, 50));
// clip-path: circle(40% at 50% 50%);
console.log(generateInsetClipPath(5, 10, 5, 10, 15));
// clip-path: inset(5% 10% 5% 10% round 15%);