Development · Web app

Fancy-Border-Radius

Visual generator for creating organic blob shapes using CSS border-radius

Visit 9elements.github.io ↗

Fancy-Border-Radius is an interactive web tool that lets you design organic, asymmetrical shapes using CSS3 border-radius properties. It provides drag-and-drop handles to manipulate eight distinct border-radius values simultaneously. Once designed, the resulting CSS code can be copied directly for use in web projects.

What it's for

  • Generate organic blob backgrounds for landing pages
  • Design asymmetrical UI card frames or image masks
  • Copy eight-value CSS border-radius rules without manual calculation

Features

  • Interactive visual handles to adjust individual corner radii
  • Full control over eight separate CSS border-radius values
  • Custom width and height inputs for exact canvas dimensions
  • One-click copy for the generated CSS code

Pricing

Free and open source

Details

Type
Web app
Category
Development
Topic
CSS Generators
Open source
Yes
Platforms
Web
For
Front-end developers and web designers
Alternative to
Blobmaker
Tags
css, generator, front end, web design, shapes, ui

Why it was saved

  • @ninalyre, 4 September 2024: Allows designers and front-end developers to manipulate 8 border-radius values visually and copy the generated CSS code with one click.

Related

Updated