UI/UX · Free online tool

Radius & Spacing

Create repeatable border radius and spacing scales for consistent interface components.

✓ Free to use↓ Export ready

Live preview

Preparing your preview...

Export to your stack

Copy or download
output.css

Different technologies support different asset types. Generated snippets are editable starting points.

ABOUT THIS TOOL

What can you create with Radius & Spacing?

Maintain one visual rhythm across buttons, cards, form fields and panels.

How to use Radius & Spacing

Choose a base spacing unit and corner radius, preview components and download the tokens.

Design tips and limitations

Avoid applying large corner radii to very small controls where corners consume the usable area.

Built for a practical design workflow

ColorPremise keeps the creative controls next to the preview and export options. Try a variation, compare the result visually, and then bring the output into your own website, app, or design project. You can always return to the free design tool directory to continue refining related details.