Design Tools

Fancy Border Radius Generator

Drag or type values to visualize and generate 8-point irregular CSS border-radius (fancy border radius) code.

Quick switch→CSS Box Shadow Generator

CSSBorder radiusDesign

Quick switch:CSS Box Shadow Generator Glassmorphism Generator

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

Create organic-shaped cards
Style morphing buttons
Add specialty UI decorations

How to use

Move the independent sliders for each corner radius
Or switch to 8-point expanded control
Copy the border-radius CSS

Example input and output

Action

Enable independent control

CSS

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

FAQ

What does the slash (/) do?

In CSS border-radius, / separates horizontal and vertical radii so you can form irregular ellipses.

Tools

Related tools

Continue with another translated tool for a nearby task.

CSS Box Shadow Generator

CSS Box Shadow Generator — Visual Controls

Available

Visually adjust offset, blur, spread, color, opacity, and inset. Preview live and generate box-shadow CSS for cards, buttons, and overlays.

CSS Shadow box-shadow

Open tool

Glassmorphism Generator

Glassmorphism Generator — backdrop-filter CSS

Available

Visually tune blur, opacity, background color, and border opacity to generate frosted-glass CSS with a -webkit prefix. Useful for cards, nav bars, and modal layers.

CSS Glassmorphism backdrop-filter

Open tool