Generator Tools
CSS Clip Path Generator
Visual editor for CSS clip-path. Drag polygon points or pick a preset, then copy ready-made CSS, Tailwind, SCSS, and JSX with an optional webkit fallback.
CSS clip-path editor
Shape
Drag points on the preview. Click the outline to add a point. Double-click a point to delete it.
Live preview
The rule applied to a real DOM element so what you see matches what browsers render.
3 points. Drag a handle to move it. Click on the outline to add a point. Double-click or right-click a point to delete it.
Points
Point 1
Point 2
Point 3
Min 3 points. Max 32 points.
Polygon presets
Click a shape to load its points. Then drag or edit the points to make it your own.
23 ready-made shapes
Basic
Arrows and chevrons
Stars
Speech bubbles
Fancy
Output
Ready-to-paste rules for CSS, SCSS, Tailwind, and inline JSX.
clip-path value
polygon(50% 0%, 100% 100%, 0% 100%)
CSS
.clip {
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}SCSS mixin
@mixin clip-shape {
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}Tailwind
class="[clip-path:polygon(50%_0%,_100%_100%,_0%_100%)]"
Inline style (JSX / React)
style={{
WebkitClipPath: "polygon(50% 0%, 100% 100%, 0% 100%)",
clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)",
}}About clip-path
- polygon() takes any number of x y coordinate pairs and connects them in order. Three or more points are required.
- circle() takes one radius value and an optional center; the default center is 50% 50%.
- ellipse() takes a horizontal and a vertical radius plus an optional center.
- inset() trims the top, right, bottom, and left edges; an optional round <radius> rounds the corners.
- Modern Chrome, Firefox, Safari, and Edge all ship clip-path on <div>elements. Older Safari and iOS still require the -webkit- prefix, which this tool includes by default.
- clip-path does not affect layout. The clipped element keeps the same width and height for flexbox, grid, and pointer events, even when the visible shape is smaller.
- Percentages are relative to the element box. Switching between percent units and pixel units is supported by browsers, but this tool emits percentages so the shape scales with the box.
- For animation between shapes, both keyframes must use the same shape function with the same number of points; otherwise the browser cannot interpolate.
How to use
- Pick a shape: polygon, circle, ellipse, or inset. The fields and preview update to match.
- For polygons, drag any point on the preview to move it, click the outline to add a new point, or double-click and right-click a point to delete it. Up to 32 points per polygon.
- Load a preset to start from a triangle, hexagon, arrow, star, message bubble, or other ready-made shape, then refine the points.
- For circle, ellipse, and inset, use the sliders or type exact percentages into the numeric fields next to each control.
- Switch the preview background between gradient, sample image, solid color, and grid to validate the shape against different backdrops.
- Use Flip horizontal, Flip vertical, Fit to bounds, and Reset to reshape without rebuilding the points by hand.
- Copy the clip-path value or the full CSS, SCSS, Tailwind, or JSX snippet from the Output panel. Toggle the -webkit-clip-path fallback when you support older Safari or iOS.
About this tool
CSS Clip Path Generator is a visual editor for the CSS clip-path property. Pick one of the four standard shape functions (polygon, circle, ellipse, or inset) and shape it interactively: drag points on the live preview to reshape a polygon, click the outline to add a point, double-click or right-click a point to delete it, or type exact percentages into the numeric fields. Eighteen ready-made presets cover the shapes that come up most often in design work (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, heptagon, octagon, arrows in four directions, left and right chevrons, five and six point stars, message bubbles, cross or plus, beveled corners, lightning bolt, and an X). Circle and ellipse modes give independent center and radius controls; inset mode trims each side independently and includes a rounded-corner radius. The preview applies the rule to a real DOM element so the shape you see is exactly the shape browsers will render, with a choice of background (gradient, sample image, solid color, or a developer-friendly grid) so you can validate the cut against any backdrop. The output panel shows the raw clip-path value plus copy-ready snippets for CSS, SCSS mixins, Tailwind v3 arbitrary values, and inline JSX style objects, with an optional -webkit-clip-path fallback that older Safari and iOS still need. Flip horizontal, flip vertical, fit to bounds, and reset controls let you reuse a shape from another orientation without rebuilding it. Useful for cutting hero sections at an angle, creating chevron banners, badge shapes, decorative dividers, custom button outlines, image masks, hover reveals, and Lottie-free animated entrances. Everything runs locally in the browser; no points, presets, or images leave your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
CSS Gradient Generator
Linear, radial, and conic gradients with multi-stop editor and live preview.
Open tool
GeneratorCSS Box Shadow Generator
Layered box-shadow with live preview, opacity, inset, and Tailwind output.
Open tool
GeneratorCSS Border Radius Generator
Visual editor for border-radius with elliptical corners and copy-ready CSS.
Open tool
GeneratorCSS Filter Generator
Visual CSS filter builder with live preview, presets, and copy-ready output.
Open tool
GeneratorCSS Triangle Generator
Visual border-trick triangle builder with CSS, JSX, Tailwind, and SVG output.
Open tool