How to Create CSS Clip-Path Shapes

Choose a named shape, optionally enter its size and position, and generate the CSS snippet containing a clip-path declaration. Empty shape, size, and position inputs use circle, 50, and center, respectively.

Understand the generator before you begin

CSS clip-path changes the visible outline of an element from a rectangle to a selected shape. This generator returns a CSS snippet containing a clip-path declaration, giving you a starting point for circular, elliptical, or polygon-based masking. The controls are independent: you can provide a shape, size, and position separately, or leave one of those inputs empty when its default fits the design.

The named choices are circle, ellipse, triangle, hexagon, pentagon, star, and diamond. Circle and ellipse templates use the size and position inputs, while the five polygon choices use fixed percentage coordinates. That distinction matters when deciding which controls to adjust for the result you need.

Set the shape inputs and generate the CSS

1. Select one of the named shapes: circle, ellipse, triangle, hexagon, pentagon, star, or diamond. If you want the default circular form, leave the shape input empty instead of entering another value.
2. Enter a size when you want to set one for a circle or ellipse. For a circle, the supplied value is inserted as a percentage. For an ellipse, the value becomes the first percentage and the second percentage is calculated as 60% of the supplied value.
3. Add a position for a circle or ellipse. A value such as center or a percentage-based position is placed after the at keyword in the generated geometry.
4. Leave the size input empty when the default value of 50 is suitable, or leave the position input empty when center is suitable. An empty shape input uses circle.
5. Generate the CSS snippet and locate its clip-path declaration. Place that declaration in the CSS rule for the element you want to mask.
6. For triangle, hexagon, pentagon, star, or diamond, read the output as a fixed polygon template. The size and position inputs do not alter the percentage coordinates used by those polygon forms.
7. Check the selected name before using the result. A value outside the named set does not create custom geometry; it uses circle geometry instead.

Check what the generated declaration represents

The generated text is a CSS snippet with a clip-path declaration for masking an element. In circular output, the chosen size appears as one percentage and the chosen position follows at. Elliptical output has two percentages: the first comes from the supplied size, and the second is 60% of that value; both are associated with the supplied position.

Polygon output should be evaluated by its coordinate template rather than by the circle and ellipse controls. Triangle, hexagon, pentagon, star, and diamond retain their fixed percentage coordinates when those inputs are changed. If a result looks circular after you intended to use another named shape, inspect the shape value first, because an unrecognized value falls back to circle geometry.

For a quick review, compare the declaration with the choices you made. A circle should reflect its percentage and position, an ellipse should show the two related percentages, and a polygon should show the coordinate pattern for its selected template. This check helps distinguish an intended template from a mismatched shape value without assuming that the polygon controls resize its coordinates.

Worked example

A designer wants a circular image mask positioned toward the upper-left area of an element.

Choose circle, enter 70 as the size, enter 25% 40% as the position, and generate the snippet.

A CSS snippet containing a clip-path declaration with circle geometry using 70% and a position placed after at.

Limitations

• Polygon forms use fixed percentage coordinates, and an unsupported shape value uses circle geometry instead of custom geometry.

Common errors

• Entering a shape name outside the supported set selects circle geometry. Corrective action: replace it with circle, ellipse, triangle, hexagon, pentagon, star, or diamond before generating the snippet.

FAQ

What happens if I leave an input empty?

An empty shape input selects circle; an empty size uses 50; and an empty position uses center. Those defaults apply when the respective inputs are left blank.

How do size and position affect a circle or ellipse?

Circle output uses the supplied size as a percentage and places the supplied position after at. Ellipse output uses the size for its first percentage, calculates the second at 60% of that value, and places both at the selected position.

Can I resize or reposition the polygon shapes with those inputs?

Triangle, hexagon, pentagon, star, and diamond use polygon templates with fixed percentage coordinates. Changing size or position does not modify those polygon coordinates.