Built-in toolFree · No signup

CSS Border Radius Generator

Generate organic CSS shapes — blobs, circles, leaves, diamonds, and more — using the full 8-value border-radius syntax. Animate morphing shapes with one click and copy the CSS keyframes.

Presets

Control mode

TL horiz48%

TL vert48%

TR horiz52%

TR vert52%

BR horiz48%

BR vert48%

BL horiz52%

BL vert52%

CSS Output

border-radius: 48% 52% 48% 52%;

How to use

Choose a preset

Pick from Circle, Pill, Blob, Leaf, Wave, Diamond, and more to start with a solid base shape.

Select control mode

Uniform changes all corners at once. Symmetric links horizontal and vertical. Independent gives full 8-value control.

Animate it

Hit '▶ Animate' to preview a continuous morphing animation between two shape states.

Copy CSS

Get the border-radius value, or the full @keyframes animation block if animated mode is active.

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

generators

CSS Gradient

The ultimate CSS gradient generator with visual preview and code export.

#gradient#color#background

generators

Neumorphism.io

Generate soft-UI neumorphic CSS box-shadow styles interactively.

#neumorphism#box-shadow#soft-ui

generators

Glassmorphism CSS

Create frosted glass UI effects with backdrop-filter CSS code instantly.

#glassmorphism#backdrop-filter#blur

generators

CSS Clip-path Maker

Drag handles to create any clip-path shape and copy CSS instantly.

#clip-path#shapes#masking

generators

CSS Filter Generator

Build CSS filter chains visually and preview on any image in real time.

#filter#image#effects

generators

Fancy Border Radius

Generate organic blob shapes using CSS border-radius eight-value syntax.

#border-radius#shapes#blobs

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →