8-Point CSS Border Radius & Organic Blob Generator

Craft organic blob shapes and asymmetric border radii using 8-value CSS border-radius notation.

CSS Border Radius & Blob Generator

Create unique organic shapes, blobs, and fancy border-radius styling with 8-point controls.

Horizontal Radius Controls

Top-Left (H): 30%

Top-Right (H): 70%

Bottom-Right (H): 70%

Bottom-Left (H): 30%

Vertical Radius Controls

Top-Left (V): 30%

Top-Right (V): 30%

Bottom-Right (V): 70%

Bottom-Left (V): 70%

Shape Presets

Blob Preview

CSS Code

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

About This Tool

CSS Border Radius & Blob Generator gives you full 8-point control over horizontal and vertical radii, enabling organic floating blobs and asymmetric shape styling.

Key Features

8-point independent corner sliders

Live morphing shape preview

Curated organic shape presets

Instant copy to clipboard

How to Use

1Adjust horizontal radius sliders for all four corners.
2Adjust vertical radius sliders for all four corners.
3Or pick from organic presets like Blob, Egg, Leaf, Water Drop, or Pebble.
4Copy the generated border-radius CSS property.

Why Use ToolSnippet CSS Border Radius & Blob Generator?

Creates organic, fluid shapes without needing external SVG or vector files.

Provides granular control over the 8-value border-radius slash syntax.

Lightweight, 100% pure CSS solution.

Tips for Best Results

Combine an organic blob border-radius with a subtle CSS gradient for modern hero illustrations
Animate border-radius between two blob states for a living background effect

Frequently Asked Questions

How does the 8-value border-radius syntax work?

The format 'h1 h2 h3 h4 / v1 v2 v3 v4' defines individual horizontal (h) and vertical (v) radii for top-left, top-right, bottom-right, and bottom-left corners.

Can I animate border-radius blobs in CSS?

Yes, you can transition or keyframe-animate border-radius values smoothly to create morphing blobs.

Related Tools

All Design & CSS Generators →

Base64 to Image Decoder & Downloader

Convert Base64 data strings into viewable and downloadable PNG, JPEG, SVG, or WEBP images.

WCAG Color Contrast Checker

Check color contrast compliance for text and UI elements against WCAG 2.1 AA and AAA accessibility standards.

Color Shades & Tint Generator

Generate a full 50-950 Tailwind/CSS palette of tints and shades from any base color.