How do I draw an organic blob shape with pure CSS?
border-radius is not just rounded corners. The full syntax accepts eight values (four for the horizontal axis, four for the vertical), which lets you draw organic blob shapes used in modern landing pages (hero sections, avatars, playful illustrations).
Plain `border-radius: 16px` gives you a rectangle with soft corners. But `border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%` becomes a drop, leaf or pebble. Each of the four corners has its own horizontal radius and vertical radius.
Here you get 8 sliders plus a symmetric mode (4 sliders for plain rectangles with different corners). Hit "Copy" and paste the CSS.
How to use
- Click a blob preset from the gallery or start from the default. Each slider (0-100%) changes a single corner.
- Turn symmetric on if 4 sliders is enough (a rectangle with different corner radii). Off = full 8 values for organic shapes.
- Pick a fill color and canvas color to see the shape in context.
- Copy the CSS and paste into your stylesheet. The shape scales with the element, since values are in %.
- Trick: add a `background: url(...)` or gradient and you have an organic avatar or a hero-section background blob.
When this helps
Organic shapes are the trend in modern web design (Stripe, Framer, most fintech landing pages):
- Hero section with background blobs. Three big colored blobs with a soft shadow give a premium feel without any imagery.
- User avatars. Instead of perfect circles, a slightly irregular squircle (Apple HIG) looks less corporate.
- Product card decoration. A blob in the corner of the card as a graphic element.
- Custom icon and pictogram silhouettes.
- Feature sections on a landing page. A colored blob behind each bullet point = playful look.
- Blob morph animation. With `transition: border-radius 2s` you get a slowly morphing shape, a very popular effect in modern portfolios.
For shadows under organic shapes see box-shadow generator. For complex angular shapes (stars, arrows, speech bubbles) use the clip-path generator.