All designer tools
Clip-path, Blob & Shape Magic
Polygon presets, organic blobs, and circles that merge into one shape
cssCSS
.shape {
clip-path: polygon(50% 0%, 64.7% 29.8%, 97.6% 34.5%, 73.8% 57.7%, 79.4% 90.5%, 50% 75%, 20.6% 90.5%, 26.2% 57.7%, 2.4% 34.5%, 35.3% 29.8%);
}htmlTailwind class
[clip-path:polygon(50%_0%,_64.7%_29.8%,_97.6%_34.5%,_73.8%_57.7%,_79.4%_90.5%,_50%_75%,_20.6%_90.5%,_26.2%_57.7%,_2.4%_34.5%,_35.3%_29.8%)]Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Points5
Number of star points. Five is the icon everyone knows; more starts to read as a seal or a burst.
Inset50%
Inner radius as a share of the outer one. Low values give sharp spikes; high values approach a polygon.
Fill is preview-only — the copied CSS is just the clip, ready to apply to your own element or image.
Keep this shape. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- SVG ToolkitThe four SVG jobs that are always four different websites — optimise, convert to JSX or a data URI, generate a pattern, generate a wave — with one source shared between them, so the file you clean is the file you convert.
- Favicon GeneratorA letter or emoji into an SVG icon plus every PNG size that still matters. Rasterized in your browser from the same SVG — nothing is uploaded.
- Section DividerWaves, tilts, notches and arcs for the seam between two full-width bands, as scalable SVG. Emits currentColor so one snippet works in both themes, with the baseline gap and the antialiased hairline already handled.