CSS Box Shadow & Border Radius Generator

The first shadow in CSS is painted on top. Move earlier or later to control order, and exclude a layer temporarily without removing its settings. Up to eight layers are supported.

Inset shadows appear inside the box border, over the background and below its content. Outer shadows appear outside the box. Both follow its border radius.

Positive X/Y moves right/down; negative moves left/up. Positive spread expands a shadow and negative spread contracts it. Blur is nonnegative and softens the edge.

Yes. Controls follow top-left, top-right, bottom-right, bottom-left order. Browser CSS proportionally reduces overlapping radii to fit; the entered values remain in the exported rule. Elliptical and percentage-radius syntax is not provided.

The preview is a bounded workspace. Large offsets, spread or blur can extend beyond it. The CSS retains your full values; test it in your project’s layout, especially where parent overflow may clip shadows.

Pixel inputs are divided by your assumed root font-size. The preview uses pixel dimensions; the exported rem values match when your project root font-size equals that assumption. Values round to four decimal places.

No. The surrounding background and preview caption are demonstration settings. CSS includes the box size, border, fill, text color, corner radii and enabled shadow layers.

This tool exports working CSS and settings JSON. It does not render a PNG; the live preview uses actual browser CSS so shadow behavior can be checked directly.

CSS generation runs locally with no processing upload or saved design history. Website ads and analytics follow the privacy information.