CSS Blob Generator

Create intricate, organic shapes natively by independently customizing the 8 anchor points of the border-radius property.

Live Shape Projection

Native CSS

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
background: linear-gradient(135deg, #8b5cf6, #8b5cf680);

Tailwind JIT

rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%] bg-gradient-to-br from-violet-500 to-violet-500/50

Blob Controls

Lock X/Y per cornerMirror diagonals

Corner values are automatically normalized to keep side sums valid, so x/y edits stay stable.

X Radius30%

Y Radius30%

X Radius70%

Y Radius30%

X Radius70%

Y Radius70%

X Radius30%

Y Radius70%

Blob Context Fill

Gradient Depth