CSS Shape Generator
Generate complex CSS shapes including wavy circles, flowers, blobs, polygons, and starbursts. Customize every parameter and copy production-ready CSS code using clip-path and mask properties.
.custom-shape {
width: 300px;
aspect-ratio: 1;
background: #3b82f6;
clip-path: polygon(100.00% 50.00%, 75.00% 93.30%, 25.00% 93.30%, 0.00% 50.00%, 25.00% 6.70%, 75.00% 6.70%);
}Modern CSS Shape Generator
Geometric Polygons
Organic Blobs
Wavy & Floral
Production Ready
Frequently Asked Questions
1. What is the difference between clip-path and mask?
clip-path defines a specific vector path (polygon) to show parts of an element, which is highly performant and ideal for geometric shapes. mask uses an image or gradient to define transparency, allowing for softer edges or more complex patterns like waves and transparency effects.
2. Are these shapes responsive and cross-browser compatible?
Yes. By using percentages in the clip-path or border-radius values, these shapes scale perfectly with the element's size. All modern browsers (Chrome, Firefox, Safari, Edge) provide excellent support for these properties.
3. Can I use these shapes with images or gradients?
Absolutely. The shapes are applied as clipping or masking paths to the element. You can use any CSS background—solid colors, complex gradients, or even background images—and the shape will correctly clip the content.
4. How do I apply these generated shapes to my website?
Simply copy the generated CSS snippet and paste it into your stylesheet. Apply the class to any HTML element (like a <div> or <img>). Ensure the element has a defined width and height (or aspect-ratio) for the best results.