Fancy Border Radius Generator

Runs in your browserDesign Tools#CSS#Blob

Drag 8 handles to shape blobs with CSS border-radius, then export a morph @keyframes animation.

Backdrop

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Shape

Drag the 8 handles on the outline, or use the arrow keys on a focused handle.

Radii

HorizontalVerticalTop left

Top right

Bottom right

Bottom left

Horizontal radii run along the top and bottom edges, vertical radii along the sides. The two radii on one edge add up to 100% at most.

Size and unit

Width

Height

Unit in the code

Percent radii scale with any box size.

Preview colour

Preview only, not in the code

Morph animation

Save two or more shapes to export a morph @keyframes animation.

Duration

How to use, limits & privacy

About Fancy Border Radius Generator

Shape blobs, eggs, pills and leaves with the 8-value CSS border-radius by dragging handles on the shape, like the fancy border radius technique. Set the width and height, switch between % and px, make a random blob, and save two or more shapes to export a morph @keyframes animation. The code is plain CSS (no SVG), and it runs in your browser.

How to Use

Start from a shape

Click a preset such as Blob, Egg or Pill, or click Random blob.

Drag the handles

Drag the 8 handles on the dashed outline, or type exact Horizontal and Vertical radii for each corner. Set Width, Height and the Unit in the code.

Animate it (optional)

Click Save shape for two or more shapes, set the Duration and click Play. The code then includes @keyframes that morph between them.

Copy the code

Choose CSS or Tailwind and click Copy.

Privacy & Processing

Mode: local
Files Leave Browser: Local tool processing; review details below
Max Input Size: Device memory limits
Account Required: No
Data Stored Locally: Nothing is saved; saved shapes are lost when you reload or leave the page.
Network Processing: Assets or models may require an initial download

Everything runs in your browser. A backdrop image you choose stays on your device and is never uploaded.

Rules & Limitations

The two radii on one edge add up to 100% at most, so the handles can't cross.
Pixel values are worked out for the width and height you set; percent values scale with any box.
Up to 8 saved shapes. Saved shapes are kept only while the page is open.
The animation changes border-radius only; the exported CSS turns it off for people who prefer reduced motion.

Top Suggestions

Organic blob backgrounds and image masks for landing pages
Pill buttons and egg or leaf shaped avatars
Slow morphing blob animations without SVG or JavaScript
Learning what the slash in border-radius does

Fancy Border Radius Generator FAQ

What do the 8 values in border-radius mean?

border-radius: a b c d / e f g h sets the horizontal radii of the top-left, top-right, bottom-right and bottom-left corners before the slash, and their vertical radii after it. Different horizontal and vertical radii make elliptical corners, which is how blob shapes are made.

How do I make a blob shape with CSS?

Give an element a background and an 8-value border-radius such as 60% 40% 30% 70% / 60% 30% 70% 40%. Drag the handles here until you like the shape, or click Random blob, then copy the line.

How do I animate a blob in CSS?

Animate border-radius between several shapes with @keyframes. Save two or more shapes here and the code includes a .blob rule, the keyframes and a reduced-motion rule; Play shows the morph first.

Should I use % or px for border-radius?

Percent radii scale with the element, so a 50% radius on a rectangle gives an ellipse. Pixel radii keep the same curve at any size, which is what pill buttons need: use half the height, such as 70px on a 140px tall button.

What happens if the radii add up to more than 100%?

The browser scales all radii down by the same factor until they fit, so the shape no longer matches the numbers. This tool stops the two handles on an edge from crossing, which keeps the sum at 100% or less.

Is my shape saved or uploaded?

Nothing is uploaded; everything runs in your browser. Saved shapes are kept only until you reload or leave the page, so copy the code before you go.