Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Clip Path Generator

Drag points over a live preview to build a clip-path shape and copy the CSS.

Shape
Preview
Presets
Points
1
X
Y
2
X
Y
3
X
Y
4
X
Y
5
X
Y
6
X
Y
CSS
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

How to generate a CSS clip-path

  1. Pick a shape

    Choose polygon, circle, ellipse or inset, or start from a preset like triangle, hexagon, star or message.

  2. Drag the points

    Drag the handles over the preview box to reshape the clip, or type exact percentages for each point.

  3. Tune the details

    Adjust the center, radius or inset edges and switch the preview background to test the crop against real content.

  4. Copy the CSS

    Copy the finished clip-path declaration and paste it straight into your stylesheet.

Why use this tool

Drag to shape

Move vertices and handles directly on the preview and watch the clip-path value update as you go.

Four shape modes

Switch between polygon, circle, ellipse and inset, each with the right controls for that shape.

Ready-made presets

Start from triangle, rhombus, hexagon, star, message, arrow, chevron and more, then refine.

Exact point editing

Type precise percentages for every vertex when a drag is not accurate enough.

Everything stays on your device

The shape is built entirely in your browser. Nothing you draw is uploaded anywhere.

About this tool

The CSS clip-path property crops an element to a shape, hiding everything outside the path you define. It is the cleanest way to make angled section dividers, hexagon avatars, message bubbles, arrows and star badges without extra images or wrapper elements. Writing the coordinates by hand is fiddly though, because a polygon is a long list of x and y pairs and a single wrong number sends a corner flying off the box.

This generator turns that into a visual task. Pick a shape mode, drag the points around a live preview, and the exact clip-path value is written out for you. Polygon mode gives you a draggable handle per vertex plus a table of numeric fields for pixel-accurate tweaks. Circle and ellipse modes expose radius and center controls, while inset mode lets you pull each edge in and round the corners. Presets drop in common shapes so you rarely start from a blank box.

Every value is expressed in percentages so the shape scales with the element at any size. Swap the preview background between a photo, a solid fill and a checkerboard to confirm the crop reads well against real content. When it looks right, copy the declaration and paste it in. Pair it with the CSS transform generator for rotation and skew, or the CSS pattern generator to fill the clipped shape.

Frequently asked questions

What is a CSS clip-path?
It is a property that crops an element to a defined shape. Anything outside the path becomes invisible, so you can make triangles, hexagons, arrows and rounded insets without extra images.
Why are the values in percentages?
Percentages are measured against the element box, so the shape scales cleanly whether the element is small or large. This makes the clip responsive without any extra work.
Can I edit points precisely instead of dragging?
Yes. In polygon mode each vertex has numeric fields for its x and y percentage, so you can type exact values when dragging is not accurate enough.
Which shapes can I create?
Polygon with any number of points, circle, ellipse and inset with optional rounded corners. Presets cover triangle, rhombus, hexagon, star, message, arrow and chevron shapes.
Is my design uploaded anywhere?
No. The preview and the generated value are built entirely in your browser, so nothing you draw leaves your device.

Related tools