Free Online CSS Clip Path Generator

A CSS clip-path generator builds a polygon() clip-path that masks an element to a chosen shape, with a live preview and copy-ready CSS.

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed
1
2
3
4
5
6
CSS
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

How to Use This Tool

  1. Pick a shape preset, or switch to custom polygon mode.
  2. Adjust the points to refine the shape on the preview.
  3. Watch the sample element clip to your shape live.
  4. Copy the clip-path CSS into your stylesheet.

What Is a CSS Clip Path Generator?

The CSS clip-path property, specified in CSS Masking Module Level 1, restricts the visible region of an element to a given geometry — everything outside the path is clipped away. The polygon() basic shape is the most flexible: it lists a series of x y coordinate pairs (usually as percentages of the element's box) that define the visible outline.

This generator offers ready-made presets — triangle, rhombus, pentagon, hexagon, star and more — and a custom mode where you adjust the points directly. Whichever you pick, it emits a clip-path: polygon(...) declaration and shows the result on a live sample so you can see the mask before committing.

Clip-path is the modern alternative to image masks for non-rectangular cards, angled section dividers and decorative shapes, and it keeps the underlying element fully interactive. The polygon() shape is supported across all current browsers. The CSS is generated entirely in your browser.

Frequently Asked Questions

What shapes can I create?
Presets cover triangle, rhombus, pentagon, hexagon, star and more, plus a custom polygon mode for your own points.
What does the CSS look like?
Output is a clip-path: polygon(...) declaration with percentage coordinates that map to any element's box.
Is clip-path widely supported?
The polygon() basic shape works in all modern browsers. Check caniuse if you must support very old engines.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Web & HTML

CSS Text Shadow

Dial in offset, blur and color sliders to craft a CSS text-shadow with a live preview and copy-ready code.

CSS Animation Generator

Pick an animation preset, set duration, timing and iteration, and copy the @keyframes plus animation CSS.

Responsive Design Tester

Load a URL in an iframe at common phone, tablet and desktop widths to spot responsive layout issues fast.

HTML Color Codes

Searchable reference of the 140+ CSS named colors with their hex and RGB values and one-click copy.

HTML Viewer

Paste HTML and see it rendered live in a sandboxed iframe, with the source side by side. Nothing is uploaded.