⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

Organic CSS Blob Shape Generator

Design CSS border-radius visually: four independent corner sliders in px or percent, a link-all-corners shortcut for instant circles and pills, plus an organic blob mode with randomized shapes.

12px
12px
12px
12px
Processing... 0%

Result

This page opens the border-radius generator directly in blob mode with an organic shape already loaded: no square corners, no perfect circle, just a soft irregular outline built from CSS alone. Hit Randomize any time for a fresh variation.

The trick behind every CSS blob is the eight-value slash syntax: border-radius accepts two sets of four percentages separated by a slash, the first set curving the horizontal radii and the second the vertical ones. Mismatching the two sets is exactly what breaks the symmetry of a plain rounded rectangle into an organic outline.

Blobs like this fill the empty space behind hero images, avatars and illustrations on countless modern landing pages, precisely because no library or SVG export is needed — it is four lines of CSS. Copy the current shape, or keep randomizing until one feels right for your layout.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Corners mode: independent top-left, top-right, bottom-right and bottom-left radius sliders, each switchable between px and percent units.
  • Link-all-corners checkbox that drives every corner from one slider, plus a checkerboard preview on a light or dark backdrop so clipped corners stay visible.
  • Blob mode with a Randomize button that builds organic eight-value slash-syntax shapes, shown large and ready to copy as CSS.

Key Benefits

✓ Every slider updates the live preview and the CSS line instantly, so you never have to guess what 12px 40% 8px 24% actually looks like.
✓ The link-all-corners shortcut turns one slider into a perfect circle, pill or squircle without touching the other three corners by hand.
✓ Blob mode generates organic, randomized shapes with the CSS eight-value slash syntax — a look a single border-radius value can never produce.

Use Cases

  • • Dial in a card's four corner radii independently — round only the top of a dropdown panel or only one side of a tab.
  • • Link all four corners to one slider to build a perfect circle, a stadium-shaped pill button or an iOS-style squircle in seconds.
  • • Switch to blob mode and hit Randomize until an organic shape fits the empty space behind a hero image or avatar, then copy the CSS.