CSS Blob Shape Generator
Create organic blob shapes with an 8-value border-radius
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you drag eight sliders to shape a border-radius blob and watch the organic curve update live in the preview. It's handy for designers and frontend developers who need quick CSS for decorative backgrounds, avatar masks, or card UI. Everything runs locally in your browser, so nothing is sent to a server.
How to use
- Pick a starting preset — Organic, Droplet, Leaf, or Egg.
- Adjust the eight horizontal and vertical sliders to fine-tune the shape.
- Watch the blob update live in the preview area.
- Copy the resulting border-radius CSS and paste it into your project.
FAQ
- Does the generated CSS work in every browser?
- The slash (/) syntax for border-radius is well supported in modern browsers. If you need to support older browsers, test it beforehand.
- What do the slider values control?
- The four values before the slash set the horizontal radius of each corner, and the four after set the vertical radius, letting you combine them into varied curves.
- Can I apply this shape to an image?
- Yes — apply the generated border-radius value to an image or div element's CSS to clip it into the blob shape.