CSS Shape Generator
Create complex shapes visually: clip-path with draggable points, blobs via Perlin noise, border-radius. Export CSS, Tailwind, JSX. Built-in color blindness simulator.
Create complex shapes visually: clip-path with draggable points, blobs via Perlin noise, border-radius. Export CSS, Tailwind, JSX. Built-in color blindness simulator.
The clip-path property clips an element to a geometric shape. This tool lets you drag points directly on the preview for full visual control.
Blobs use a Perlin/Simplex noise algorithm to create natural, organic contours. Adjust complexity and seed for unique shapes.
Yes, it applies SVG filters based on the Brettel-Viénot model with LMS matrices to accurately simulate protanopia, deuteranopia, and tritanopia.
Absolutely. Dedicated buttons generate Tailwind CSS (with [clip-path:...] syntax) and JSX for React. Native CSS is always available.
Click “Share URL” — all parameters are encoded into the URL hash. Send the link and your colleague will see the exact same configuration.
Yes, 100% free, no registration, no ads. All shapes you create belong to you.