CSS Clip Path Generator
Generate CSS clip-path snippets for circles, ellipses, and polygon shapes with customizable size and positioning.
Run tool
This CSS clip-path generator creates element masking code for modern web design. You can select from seven built-in geometric forms: circle, ellipse, triangle, hexagon, pentagon, star, and diamond. For radial shapes such as circles and ellipses, the generator adjusts the radius percentage and coordinates based on your specified size and position values. For example, setting an ellipse with a size of 40 at top center calculates proportional horizontal and vertical radii alongside the placement anchor. The multi-sided templates produce precise polygon declarations with fixed percentage coordinates designed to fit standard bounding boxes. When an unrecognized shape name is entered, the generator falls back to the default circular mask geometry. After generation, you can copy the declaration directly into your CSS stylesheets, inline style attributes, or component frameworks to crop images, buttons, cards, and container elements without extra graphics software.
Instructions
- Select or type your desired shape, such as circle, ellipse, triangle, hexagon, pentagon, star, or diamond.
- Enter a numeric size value to define the radius percentage for circular and elliptical shapes.
- Specify an alignment position, such as center or top left, for circle and ellipse placement.
- Click Run to generate the CSS clip-path snippet in the output panel.
- Copy the resulting CSS declaration into your project stylesheet or UI component.
Examples
- Shape: ellipse, Size: 40, Position: center generates clip-path: ellipse(40% 24% at center);
- Shape: triangle, Size: 50, Position: center generates clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
FAQ
Which shape names are recognized by the generator?
The generator recognizes circle, ellipse, triangle, hexagon, pentagon, star, and diamond. If the shape is not recognized, the generator uses the default circle shape.
How do size and position affect polygon shapes?
Size and position parameters apply specifically to circle and ellipse shapes. Polygon shapes like triangles and stars use fixed coordinate templates.
What happens if I leave the input fields empty?
Leaving the fields empty generates a default circle shape with a size of 50% centered within the element.