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.

Live Preview
Settings & Code
/* CSS Code */

Frequently Asked Questions

What is a CSS clip-path?

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.

How are blobs generated?

Blobs use a Perlin/Simplex noise algorithm to create natural, organic contours. Adjust complexity and seed for unique shapes.

Is the color blindness simulator realistic?

Yes, it applies SVG filters based on the Brettel-Viénot model with LMS matrices to accurately simulate protanopia, deuteranopia, and tritanopia.

Can I export for Tailwind or React?

Absolutely. Dedicated buttons generate Tailwind CSS (with [clip-path:...] syntax) and JSX for React. Native CSS is always available.

How do I share my shape?

Click “Share URL” — all parameters are encoded into the URL hash. Send the link and your colleague will see the exact same configuration.

Is the tool free?

Yes, 100% free, no registration, no ads. All shapes you create belong to you.