CSS Forge
Back to generator

Star Compact Clip Path CSS

Star Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

clip-path

Editable Shape

Output

Copy-ready CSS

Pure CSS

clip-path: polygon(50% 14%, 58.6% 39.2%, 86% 39.2%, 63.7% 54.3%, 73% 86%, 50% 65.8%, 27% 86%, 36.3% 54.3%, 14% 39.2%, 41.4% 39.2%);

Tailwind v4

[clip-path:polygon(50%_14%\,_58.6%_39.2%\,_86%_39.2%\,_63.7%_54.3%\,_73%_86%\,_50%_65.8%\,_27%_86%\,_36.3%_54.3%\,_14%_39.2%\,_41.4%_39.2%)]
Try it in the generator

When to use it

Star Compact is a star clip-path preset for interface shapes, cropped media blocks, section edges, and decorative CSS cuts. It uses 10 polygon points, which keeps the effect readable while still giving the element a custom silhouette. Star Compact is a tight badge-like shape for small UI accents 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 star 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.

Hexpedia

Color reference

This clip-path preset is shape-only. Pair it with a color reference from Hexpedia when choosing a fill or background.

Open Hexpedia

Explore more

More CSS Forge paths

Clip Path galleryBox Shadow generatorGlassmorphism generator

Related

Similar clip paths

These presets share shape and layout tags with Star Compact.