Loona Clip Path Generator — CSS Shapes: Polygon, Circle, Ellipse & Inset
clip-path is how modern sites cut hero images into angles and photos into stars without image editing. Pick a shape, see it live, copy one line.
How to use the Clip Path Generator
- Choose a shape type; for polygons, pick a preset.
- The preview element is clipped instantly — the same code will clip your own images and sections.
- Copy the clip-path declaration.
How it works
Polygon points are percentages of the element’s box, so shapes scale with the element. Unlike border tricks, clip-path clips the element’s entire rendering — backgrounds, images and borders alike — and the clipped-away part does not receive clicks.
Worked example
A landing page’s hero photo is clipped into a hexagon to match the brand’s logo geometry — no image editor, one CSS line.
Frequently Asked Questions
Does clip-path work on images?
Yes — it is most famous for images, but it clips any element, including whole sections for angled page dividers.
Can I make a custom polygon?
Start from the closest preset and nudge the percentages in the copied CSS — each pair is one point (x% y%), listed clockwise.
Is text clipped too?
Text inside the element is clipped with it — for text effects, the Text Gradient Generator is the better tool.
Browser support?
All modern browsers support clip-path shapes; the polygon/circle/ellipse/inset forms used here are the safest set.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).