CSS Blob Shape Generator
Craft organic blob shapes in CSS with eight border-radius sliders
Adjust the eight values in the border-radius slash syntax with sliders and watch organic blob shapes, like water drops and leaves, take form in a live preview. It's a fast way for designers and front-end developers to pull CSS for background decorations, profile image masks, and card UI. Everything is calculated in your browser and nothing is sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Start from a preset: organic, water drop, leaf, or egg.
- Move the eight horizontal and vertical sliders to fine-tune the shape.
- Watch the blob reshape in real time in the preview.
- Copy the finished border-radius CSS with the copy button and paste it into your project.
FAQ
- Does the generated CSS work in every browser?
- The border-radius slash (/) syntax is widely supported in modern browsers. If you need to support legacy browsers, it's worth testing separately.
- What do the slider values actually control?
- The four values before the slash set the horizontal radius of each corner, and the four after it set the vertical radius. Combining them is what produces all the different curves.
- Can I apply this shape to an image?
- Yes. Apply the generated border-radius value to the CSS of an image or div and that element gets clipped into the blob shape.