CSS Clip-Path Generator

How do you generate a triangle clip-path for a real element?

Choose Polygon and the Triangle preset, then click Copy CSS to get clip-path: polygon(50% 0%, 100% 100%, 0% 100%);. The first vertex is at the top center, the second at the bottom right, and the third at the bottom left. Apply the declaration to an element with a visible background or image and a defined size.

For a fixed 240px wide, 160px high badge, select Pixels under Polygon units and enter those dimensions. The tool calculates each horizontal coordinate as Math.round(x × width / 100) and each vertical coordinate as Math.round(y × height / 100). The same triangle produces these values:

Triangle preset converted for a 240px by 160px element

Vertex	Percentage coordinates	Pixel coordinates
Top center	50% 0%	120px 0px
Bottom right	100% 100%	240px 160px
Bottom left	0% 100%	0px 160px

.badge {
  width: 240px;
  height: 160px;
  background: #6366f1;
  clip-path: polygon(120px 0px, 240px 160px, 0px 160px);
}

The dimensions here belong to your stylesheet as well as the conversion inputs. Copy CSS copies only the clip-path declaration, not width, height or background. Changing the target element's size later does not rescale copied pixel coordinates.

What does CSS clip-path change about an element?

As defined by CSS Masking Module Level 1, a clipping path controls which part of an element is painted. The inside remains visible and the outside is hidden. Clipping does not reshape the element's layout box, so neighboring content does not automatically flow around the triangle. Keep space for the original rectangular box when planning a card or badge layout.

The generator exposes polygon(), circle(), ellipse() and inset(). It does not provide a freehand curve editor or path() input. Keep meaningful text and interactive controls comfortably inside the visible region, and check focus indicators in your actual page. A decorative shape preview cannot establish that the finished interface is accessible.

How do you edit complex polygon shapes precisely?

Start with Triangle (3 points), Pentagon (5), Hexagon (6), Star (10), Arrow (7) or Cross (12). Polygon vertices connect in their listed order, including the closing edge back to the first point. Drag a handle for a rough adjustment, then use its X and Y percentage fields for a deliberate position.

Coordinates stay between 0 and 100. Without snapping, edits round to whole percentages; Snap to 5% grid rounds edited coordinates to multiples of five. Focus a handle and use arrow keys to move one percentage point, or five with snapping enabled. Shift plus an arrow uses a ten-point step. These controls help align corners without repeated dragging.

Click an edge to insert a vertex at the clicked position, subject to rounding and snapping. Add point instead inserts the rounded midpoint of the edge after the selected vertex; without a selection it uses the closing edge. Remove point, Delete or Backspace keeps at least three vertices. Undo and Redo handle shape changes; image selection, units, dimensions and the shadow toggle are separate settings.

When should you choose Circle, Ellipse or Inset?

Circle provides Radius from 5% to 70% and Center X and Center Y from 0% to 100%. Ellipse separates Radius X and Radius Y, each from 5% to 70%, with the same center controls. Its initial values generate ellipse(50% 35% at 50% 50%), an oval centered in the box.

Inset offers Top, Right, Bottom and Left offsets from 0% to 45%, plus Border radius from 0px to 50px. Its initial offsets produce inset(10% 10% 10% 10%). A positive radius adds a round clause in pixels. This is a convenient rectangular crop with rounded corners, whereas polygon edges remain straight. For a full box with rounded corners, see CSS Border Radius Generator.

How do percentages and pixels behave responsively?

Polygon percentages use width for X and height for Y. They follow the element's proportions, so a hexagon stretches when its box becomes wider. Preserve an appropriate aspect ratio in your own CSS if that stretching is unwanted. Pixel output uses dimensions from 1 to 10,000, rounded to integers; each converted vertex also rounds to a whole pixel.

Percent mode previews a square. Polygon pixel mode changes the preview aspect ratio to your entered width and height, but renders it at a smaller display size using percentage coordinates. It is a proportional preview, not a full-size pixel inspection. The Pixels option applies only to polygons: other shapes retain percentage parameters, with the inset corner radius in pixels. Use media queries yourself when different layouts need different clipping values.

How do you use the Tailwind and SVG outputs?

Copy Tailwind turns the current value into an arbitrary-property class, replacing spaces with underscores. The default triangle becomes [clip-path:polygon(50%_0%,_100%_100%,_0%_100%)]. Copy SVG is polygon-only and returns a clipPath with the default ID clip, containing polygon coordinates expressed as fractions from zero to one.

The SVG uses clipPathUnits="objectBoundingBox" and stays proportional regardless of the CSS unit selection. Place it inside your SVG definitions and reference its ID from the element you want to clip. Rename duplicate IDs when combining several exported shapes. For curved decorative outlines rather than straight polygon segments, explore SVG Blob Generator.

How do shadows and polygon animations fit into the workflow?

Enable Drop shadow to preview a filter on a wrapper surrounding the clipped child. Copy wrapper HTML and Copy wrapper CSS provide that structure with a sample background. The wrapper output uses percentage coordinates and the selected aspect ratio. It does not reuse the local preview image or the polygon's pixel declaration.

For polygon morphing under CSS Shapes Module Level 1 interpolation rules, use matching vertex counts and corresponding vertex order at both endpoints. Add vertices to the simpler shape before copying each state, then write the transition or keyframes in your stylesheet. This tool produces static shape code, without an animation timeline or keyframe export.

When do you need an image editor or mask instead?

Use your image accepts a local file; dropping or pasting an image also updates the preview. It uses object-cover, so source proportions may already be cropped to the preview box before clipping. Reset to gradient removes the image. Local object URLs are released on replacement, reset and tool unmount.

This workflow copies code rather than downloading a cropped bitmap. CSS Masking Module Level 1 masks support partial transparency for fades and soft edges, while these clipping shapes define a visible region with a hard boundary. Choose a mask for feathering, or an image editor when the deliverable must be an altered image file.