Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Build a CSS box-shadow with a live preview, including inset shadows.
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);This tool builds a CSS box-shadow declaration visually -- adjust offset, blur, spread, color, and opacity with instant live preview, including the option for an inset (inner) shadow instead of the default drop shadow.
Adjust the offset X/Y, blur, spread, color, and opacity sliders/fields. Toggle "Inset" for an inner shadow. The preview card and generated CSS update instantly.
box-shadow: offsetX offsetY blur spread color; -- offset moves the shadow, blur softens its edge, spread grows or shrinks it beyond the element's box, and inset (if present) flips it to render inside the element instead of behind it.
For text shadows specifically, see the Text Shadow Generator.
The tool opens with offset X of 0, offset Y of 4, blur of 12, spread of 0, black color and 20 percent opacity, with inset turned off. Together these produce a soft shadow slightly below the element: box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2); The color picker gives a hex color, and the tool converts it to an rgba value using your opacity percentage divided by 100, so 20 becomes 0.2. This is why you should adjust opacity with the opacity field instead of trying to pick a transparent color in the picker.
Consider a hypothetical product card that should look slightly raised. Try offset X 0, offset Y 8, blur 24, spread -4 and opacity 18. The negative spread pulls the shadow in from the sides so it appears mostly beneath the card rather than as a halo around it, while the larger blur keeps the edge soft. For a hovered state, you might duplicate the rule and increase offset Y and blur a little to suggest the card lifting. Keep the rise gradual; large jumps look jarring.
The preview card updates as you type, but it shows the shadow on the tool's own background. Real pages have different background colors, and a shadow that looks right on white can disappear on a dark theme or look muddy on a colored one. Re-check the shadow on your actual background after pasting it in. Also remember that shadows do not take up layout space, so they can be clipped by a parent element with overflow hidden.
The tool outputs one shadow layer. Many polished designs stack a close, sharp shadow and a distant, soft one. To do that, generate two separate values and join them with a comma in one box-shadow declaration.
Blur softens the shadow's edge into a gradient; spread expands (positive) or shrinks (negative) the shadow's size uniformly in all directions before blurring is applied.
Inset shadows work well for a "pressed" or "recessed" visual effect, like an active button state or an input field's focus indication.
CSS box-shadow supports comma-separated multiple shadow layers; this tool generates a single-layer shadow for quick use, which you can extend manually by adding more comma-separated shadow values.
Common reasons are opacity set too low, a shadow color too close to the background, a parent with overflow hidden clipping it, or all values set to zero. Increase blur and opacity to check.
Yes. Pick any color with the color picker; the tool converts it into rgba with your chosen opacity. Softly tinted shadows can look more natural than pure black.
It shrinks the shadow relative to the element's box in every direction, so combined with an offset it produces a shadow that peeks out from just one side.
No. It is drawn outside the box model, so it will not push other elements around, but it can be clipped or overlapped by neighbours.
Reference: MDN Web Docs