CSS Clip Path Generator
Free online CSS clip-path generator. Design polygon, circle, ellipse and inset shapes with draggable points, live preview and one-click CSS code copy.
What is CSS clip-path?
clip-path is a CSS property that clips an element to a basic shape or path. Everything outside the shape is hidden, so you can turn a rectangular image or box into a triangle, circle, hexagon, angled banner or any custom polygon without editing the image itself.
Which browsers support clip-path?
All modern browsers support the basic shape functions used by this generator: polygon(), circle(), ellipse() and inset(). This includes Chrome, Edge, Firefox, Safari and Opera. The old prefixed -webkit-clip-path syntax is only needed for very old mobile Safari versions.
How does the polygon mode work?
In polygon mode the preview shows every vertex as a draggable dot. Drag a dot to move it, double-click on empty space to insert a new point, click a dot to select it and press the delete button to remove it. The CSS value updates in real time with percentage coordinates.
What do the percentages in polygon() mean?
Each vertex is written as an X Y pair in percent, measured from the top-left corner of the element. Because the values are relative to the element size, the shape scales with the element and stays responsive on any screen width.
What is the difference between circle, ellipse and inset?
circle(radius at x y) clips to a round shape with one radius, ellipse(rx ry at x y) lets you set different horizontal and vertical radii, and inset(top right bottom left) clips a rectangle pulled in from each edge. This generator gives you sliders and number inputs for every parameter.
Does clip-path affect layout or clicks?
clip-path is purely visual. The element keeps its original box in the layout, so nothing around it moves. However, pointer events such as clicks only register inside the visible clipped area, which is useful for creating custom shaped buttons.
Can I animate a clip-path?
Yes. Browsers can smoothly transition between two clip-path values when the shape function and the number of points match, for example from a square inset to a smaller inset, or between two polygons with the same vertex count. Animate it with the CSS transition property.
Is my image or data uploaded anywhere?
No. The preview image is a gradient drawn locally on a canvas element, and every calculation happens in your browser. Nothing you design is sent to any server, so the tool also works offline once loaded.
What are common use cases for clip-path?
Popular uses include diagonal or slanted hero sections, hexagonal or circular avatar masks, triangular speech pointers, custom image collages, angled card corners and creative button shapes, all without any image editing software.
How to Use CSS Clip Path Generator
Shape any element with CSS clip-path instead of editing images. Pick a shape function, drag the handles, and copy production-ready CSS. Everything runs locally in your browser.
- Choose a mode: Polygon, Circle, Ellipse or Inset.
- In Polygon mode drag the vertex dots, double-click empty space to add a point, and select one before deleting it.
- In Circle, Ellipse and Inset modes fine-tune each value with the sliders or type an exact percentage.
- Watch the live preview update over a locally generated gradient sample image.
- Copy the single-line clip-path rule and paste it into your stylesheet.
Keep the same number of polygon points between two states and you can animate the shape smoothly with a CSS transition.
Related Tools
- CSS Box Shadow Generator Free online CSS box-shadow generator. Visually create beautiful shadows with adjustable offset, blur, spread, color and inset. Live preview and instant code copy.
- CSS Gradient Generator Create stunning CSS gradients visually. Generate linear, radial & conic gradients with multiple color stops, custom angles and positions. Copy production-ready code instantly.
- Fancy Border Radius Generator Free online fancy border radius generator. Drag 8 handles or pick a blob preset to create organic CSS shapes and copy the border-radius code instantly.
- Color Converter Free online color converter. Convert HEX, RGB, HSL, HSV formats instantly with visual picker. 100% private, runs in your browser.
- CSS Easing Generator Free online CSS easing generator. Drag the cubic-bezier control points on an interactive curve, choose from 18 presets, watch a looping ball preview and copy the timing function instantly.
- Text Shadow Generator Free online text-shadow generator. Stack multiple shadow layers with offset, blur, color and opacity, try Neon, 3D, Retro and Glow presets, and copy the CSS instantly.
- CSS Beautifier Format and beautify CSS code instantly. Convert minified CSS to readable, well-indented code with customizable options.
- CSS Minifier Free online CSS minifier. Instantly compress and optimize CSS code by removing whitespace, comments and unnecessary characters. Reduce file size for faster web performance.