Radius
Preview
Surface shape
border-radius: 24px 24px 24px 24px;
Corners
Presets
CSS export
.surface {
border-radius: 24px 24px 24px 24px;
}Overview
Generate border-radius values for cards, buttons, and surfaces. Edit corners independently or link them together and copy the final CSS.
Create per-corner radius values and copy clean CSS for UI surfaces and cards.
Common workflows
- Generate shades, tints, and alternate color formats from one base color.
- Build palette harmonies and compare them in a UI preview before exporting values.
- Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.
FAQ
Can I control each corner separately?
Yes. You can unlink the corners to set each radius independently, or keep them linked for a uniform shape.
Does it export CSS?
Yes. The generator outputs a ready-to-copy border-radius declaration.