100% Real-Time Fancy Shape & Blob Studio

CSS Border Radius & Fancy Blob Generator

Create custom CSS border-radius shapes, smooth rounded card corners, and 8-point organic blob geometries with real-time controls.

Gradient Start

Gradient End

Shape Preview

Pure CSS Code

Tailwind CSS Arbitrary Class

border-radius: [TL_x] [TR_x] [BR_x] [BL_x] / [TL_y] [TR_y] [BR_y] [BL_y];

The slash / separates horizontal radii from vertical radii, enabling organic, smooth blob geometries for hero avatars and UI accents.

Tailwind CSS arbitrary values allow full 8-point support using underscores in place of spaces: rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%].

📖 Detailed Guide & Use Cases

Build custom card corner radii and organic 8-point morphing CSS blob shapes using interactive visual sliders. Copy CSS code snippets instantly.

CSS border-radius allows specifying 8 distinct values (top-left-x top-right-x... / top-left-y...) creating smooth organic blob geometries.

Yes, 8-point border-radius is natively supported across all modern web browsers.