Free tool

Box-shadow & Border-radius Generator

Build a shadow and rounded corners with a live preview and copy the CSS instantly.

Horizontal offset — 0px

Vertical offset — 8px

Blur — 24px

Spread — 0px

Opacity — 0.25

Corner radius — 12px

Color

Inset (shadow on the inside)

Box-shadow and border-radius at a glance

box-shadow draws a shadow with horizontal/vertical offset, blur and spread radius, and a color (optionally inset for a shadow on the inside). border-radius rounds an element's corners. Both are separate CSS properties often used together for cards, buttons, and modals.

Need help with your UI components? Get in touch