LoveCSS.comLoveCSS

CSS Clip-Path Generator

Shapes

Polygon Tools

Point Editing

Preview Background

Editor

#X (%)Y (%)

How to use

  • Drag points to adjust the shape
  • Add or remove points as needed
  • All values are in percentage (%)
  • Changes reflect in real-time

Your CSS

.shape {
  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%
  );
}

Your HTML

<div class="shape">
  Content
</div>

Preview Options

Overlay color
%

About CSS Clip-Path Generator

Create custom CSS shapes online — polygons, stars, blobs and more. Drag points to design your shape, then copy clean CSS instantly.

Related Tools

More free CSS generators you might like.

CSS Shape Generator

Build shapes using pure CSS.

CSS Filter Generator

Adjust blur, contrast and more.

CSS Transform Generator

Rotate, scale and skew elements.

Gradient Generator

Create beautiful, animated CSS gradients visually.

Also check out the Border Radius Generator, the Grid Generator and the Glassmorphism Generator.