Pentagon Soft Clip Path CSS

Pentagon Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

clip-path

Editable Shape

Output

Copy-ready CSS

Pure CSS

clip-path: polygon(50% 6%, 94% 39.4%, 78.2% 94%, 21.8% 94%, 6% 39.4%);

Tailwind v4

[clip-path:polygon(50%_6%\,_94%_39.4%\,_78.2%_94%\,_21.8%_94%\,_6%_39.4%)]

Try it in the generator

When to use it

Pentagon Soft is a pentagon clip-path preset for interface shapes, cropped media blocks, section edges, and decorative CSS cuts. It uses 5 polygon points, which keeps the effect readable while still giving the element a custom silhouette. Pentagon Soft is a safer crop with less aggressive corners for CSS clip-path layouts. The preset is written as plain CSS, so it works with images, cards, gradient panels, and pseudo-elements without requiring SVG assets. Use it when a rectangular block feels too flat, or when a pentagon shape needs to guide attention across a page. Open it in the generator to drag individual vertices, switch templates, and copy the updated clip-path or Tailwind arbitrary value.

Explore more