Create CSS clip-path shapes visually by dragging points with polygon, circle, and ellipse presets.
This tool lets you build a CSS clip-path value by manipulating a shape directly on a preview box instead of typing coordinates by hand. Switch between polygon, circle, and ellipse modes, drag the resulting points or radius handles, and the tool writes out the matching clip-path function as you go. The part people trip on: every coordinate is a percentage of the box being edited, not a fixed size, so a shape that looks right in the square preview can skew badly once pasted onto a wide banner or a differently proportioned element.
A concrete input and expected output from the current implementation.
Input
Set a triangle in polygon mode with vertices at top-center, bottom-right corner, and bottom-left corner of the preview box.
Expected output
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Each vertex is expressed as an x% y% pair relative to the element's own box - 50% 0% for top-center, 100% 100% for bottom-right, and 0% 100% for bottom-left - with the path closed automatically back to the first point.
Polygon mode gives draggable vertices over a preview box; moving a point updates its x/y position as a percentage of the box's width and height. Circle and ellipse modes swap the vertex grid for a radius and center handle, or an rx/ry pair, that can be dragged to adjust the shape.
As the shape is edited, the tool re-renders the corresponding clip-path function - polygon(x% y%, ...), circle(r% at x% y%), or ellipse(rx% ry% at x% y%) - as CSS text ready to copy into a stylesheet.
Only if both values use the same basic-shape function, the same number of points, and the same reference box - two polygons with matching vertex counts and a compatible fill rule (both nonzero or both evenodd) can interpolate smoothly, but a polygon transitioning to a circle, two polygons with mismatched point counts, or shapes that resolve against different reference boxes will not animate smoothly in most browsers. This tool outputs a static value per shape; the transition or animation rule, including any box or fill-rule keyword, is written separately.
No. clip-path only changes what is painted and, in current browsers, what is clickable on a live element - the underlying image file and the element's box for layout purposes, such as margins and document flow, are unchanged. This tool hands over CSS text to apply; nothing is saved or exported as a cropped image.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.