Loona Border Radius & Blob Generator — Organic Shapes in CSS
A plain border-radius makes pills and circles. The slash syntax (four horizontal values / four vertical values) unlocks pebbles, blobs and avatars with personality — this tool makes it visual.
How to use the Border Radius / Blob Generator
- Drag the eight sliders — the first row shapes the top and bottom edges, the second row the left and right curves.
- Or roll a random blob until one feels right.
- Copy the border-radius declaration and apply it to any element with a background or image.
How it works
Each corner gets two radii (horizontal and vertical) expressed as percentages of the element’s size, written as "h1 h2 h3 h4 / v1 v2 v3 v4". Percentages keep the blob’s character at any element size.
Worked example
A teacher’s profile photo gets a pebble-shaped frame on the class site — one declaration, copied from here, replaces a graphic designer.
Frequently Asked Questions
Why eight values?
One value per corner makes ellipses at best. Two per corner (horizontal + vertical) is what allows asymmetric, organic shapes.
Will it work on images?
Yes — apply it to an img or a container; add overflow: hidden on containers so children are clipped too.
Can I animate between blobs?
Yes — border-radius transitions smoothly in CSS, so two of these values can morph into each other on hover.
Is the output standard CSS?
Completely — the slash syntax is supported by all modern browsers.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).