CSS Box Shadow & Border Radius Generator
Two related generators on one page: a box-shadow builder that stacks multiple layers with full offset, blur, spread, color, opacity, and inset control — and a border-radius section covering per-corner values and the 8-value "blob" syntax with a randomize button. The preview box renders exactly the CSS you copy.
Box shadow
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
Border radius
border-radius: 16px;
Polish a real design in Moda
Shadows and rounded corners are finishing touches — apply them to cards, mockups, and layouts.
Try Moda free →Why realistic shadows use multiple layers
A single box-shadow reads as flat because real shadows have two visible components: a tight, dark contact shadow where the object nearly touches the surface, and a large, soft ambient shadow from diffuse light. Layering both — for example a 0 2px 6px at 12% opacity under a 0 12px 32px at 8% — is how design systems like Material produce elevation that feels physical. CSS paints the first layer in the list on top, and this tool preserves your layer order in the emitted value.
What each shadow control does
X and Y offsets move the shadow (positive Y drops it below, matching light from above); blur softens the edge — the shadow extends half the blur radius beyond its geometry; spread grows (or with negative values, shrinks) the shadow before blurring, which is how you make a shadow tighter than its element; and inset flips the shadow inside the box for pressed and recessed effects. Opacity is emitted as an rgba() alpha rather than a lighter gray, so the shadow darkens whatever is behind it instead of graying it out.
The 8-value blob radius, demystified
border-radius accepts a second set of four values after a slash: the first four are the horizontal radii of each corner and the second four the vertical radii, corner order top-left, top-right, bottom-right, bottom-left. When the horizontal and vertical radius of a corner differ, the corner becomes a quarter-ellipse instead of a quarter-circle — chain four of those and the box turns into an organic blob. The randomize button keeps opposite radii complementary (each pair sums to 100%) so the result stays a smooth, balanced shape rather than a dented rectangle.
Frequently asked questions
Which shadow layer renders on top when they overlap?
The first one in the box-shadow list. Layers are painted back-to-front from the end of the list, so put your tight contact shadow first and the big soft ambient shadow after it.
What is the difference between blur and spread?
Spread resizes the shadow’s silhouette before any softening — positive values push it outward on all sides, negative values pull it inward. Blur then softens the edge of that silhouette. A large blur with a negative spread is the recipe for a soft shadow that stays tucked under the element.
Why use rgba() opacity instead of a gray shadow color?
A semi-transparent black darkens whatever is behind the element — colored backgrounds included — the way a real shadow does. A solid gray only looks right on white and turns chalky on colored surfaces. The opacity slider therefore controls the alpha channel of the emitted color.
Do box-shadow and border-radius affect layout or performance?
Neither adds layout size — shadows paint outside the box without affecting flow, which is also why a shadow never triggers scrollbars. Performance-wise both are cheap when static; the main caution is animating blur radius on many elements, where animating opacity of a pre-rendered shadow is smoother.
Does the border radius clip the shadow?
No — the shadow automatically follows the same rounded outline as the box, including full blob shapes. The preview here applies both at once, which is exactly how they combine in production.