Draw polygon, circle, ellipse, and inset clip-path shapes visually and export the CSS code.
Shape an element's visible region by positioning the geometry for one of four CSS basic-shape forms: polygon(), circle(), ellipse(), or inset(). The generator translates the visual result into a clip-path declaration for a stylesheet. Polygon points determine straight edges, while the other modes describe radii, a center, or inward offsets. The frequent surprise is that clipping changes what is painted, not the element's layout box, so neighboring content still lays out around the original rectangle.
A concrete input and expected output from the current implementation.
Input
Polygon points, in order: 0% 0%, 100% 0%, 50% 100%
Expected output
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
The first two points are the top-left and top-right corners, and the third is the bottom center. The final edge closes back to the first point, producing a triangle.
Choose a basic shape and adjust its geometry in the preview. A polygon is an ordered list of x-y coordinate pairs; consecutive points form edges, and the browser closes the last point back to the first. A circle records a radius and center, an ellipse records two radii and a center, and an inset records offsets from the box edges.
The generated declaration belongs on the element being clipped. Percentage x coordinates scale with the reference box width, while percentage y coordinates scale with its height. This makes the points responsive, but changing the element's aspect ratio can stretch the apparent shape. The declaration does not supply the element's dimensions, content, background, or positioning.
Usually, when it uses percentages. Horizontal coordinates scale with the reference box width and vertical coordinates with its height. That keeps vertices at relative positions, but it does not preserve the same angles on elements with different aspect ratios. Test the declaration at every size and proportion the component actually uses.
No. clip-path limits visible painting; it does not define the contour used for line wrapping. Wrapping text around a floated shape is controlled by shape-outside and its layout requirements. Corresponding geometry can be recreated there, but the clip-path declaration by itself will not change how nearby text flows.
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.