Shape cropping
Generate CSS clip-path rules to hide parts of an element. Select a base shape — circle(), ellipse(), inset(), or polygon() — and drag the sliders to set the coordinates.
The visual preview updates immediately. When the crop matches your design, copy the generated CSS rule to paste into your stylesheet.
Percentage coordinates vs pixels
This generator outputs coordinates in percentages (e.g., 50% 100%) rather than absolute pixels. Percentages ensure the clipped shape scales responsively as the parent element resizes on smaller screens.
Inset vs padding
The inset() shape works similarly to CSS margin or padding, defining how much of the image to cut away from the top, right, bottom, and left edges. Use it to trim the visible edges of a background image or a container without changing its CSS layout box.