Forget boring rectangles. Bend the web to your will with our drag-and-drop vector editor. 100% Free.
Move points around like it's 1999 but smoother. Add bezier curves with a click.
Get raw code. No bloat. Copy paste into your React, Vue or HTML project instantly.
Upload your cat photos. Crop them into stars. Be a legend.
We generate the weird arbitrary values so you don't have to guess. Just copy the class.
Click and drag any point to reshape. Double click to add new points. It's intuitive, fast, and kinda addictive.
Tweak border radius, smooth curves with handles, or apply predefined shapes like stars and blobs.
Grab the code. We generate standard CSS `clip-path` or SVG code. Ready to paste into your project.
Why stop at one shape? Stack 'em up. Create complex compositions by adding multiple layers. Each layer has its own unique path, color, and settings.
Don't want to draw? Let math do it. Generate perfect polygons, stars with specific counts, or random organic blobs instantly.
Start with a solid foundation. Choose from a library of classic shapes: Triangles, Pentagons, Hexagons, and Rhombuses. They are essentially starting points for your chaos.
Instantly align your mess to the dead center.
Mirror horizontally or vertically. Find new perspectives.
Get in tight for pixel-perfect precision.
Spin it right round. Works on individual layers.
It's not just about dragging dots. Fine tune everything. Adjust corner roundness globally or individually. Switch point types from sharp corners to smooth bezier curves for organic flows.
Turn any image into a shape. Upload your file, and we wrap the clip-path around it. Move the image inside the shape, scale it, fit it, or fill it.
Shapes are boring if they are flat. Add depth.
We are always cooking. Try experimental features before anyone else.
Apply localized turbulence, displacement maps, and gooey effects directly to your shapes.
Compositing made easy. Use Difference, Exclusion, and Hard Light to create complex visual layers.
Procedural grain generation for retro aesthetics. Add grit and texture without external images.
Static shapes are fine, but moving shapes are better. We provide the keyframes. You copy the code. Create breathing effects, spinning stars, or morphing blobs with standard CSS transitions.
Export to Standard CSS, Tailwind classes, or React JSX components.
Auto-minified output with CSS Variables for easy theming.
Leverages clip-path & mask-image for complex shaping.
Includes @supports queries to ensure safety on older browsers.
98 99 100 .custom-shape { 101 width: 300px; 102 height: 300px; 103 background-color: #FF66C4; 104 clip-path: polygon( 105 50% 0%, 106 100% 50%, 107 50% 100%, 108 0% 50% 109 ); 110 } 111 112
Your shape deserves to live on the web. Export as:
...and millions more.