Box Shadow Generator

This CSS box shadow generator lets you design a shadow visually — drag the offset, blur, spread and opacity sliders and watch the preview update instantly. When it looks right, copy the finished box-shadow declaration or the equivalent Tailwind arbitrary-value class straight into your stylesheet.

The CSS box-shadow property takes five values: horizontal offset, vertical offset, blur radius, spread radius and colour. Positive offsets push the shadow right and down; blur softens the edge; spread grows or shrinks the whole shadow before blurring; and the inset keyword flips the shadow inside the element for pressed or recessed effects. Realistic depth usually comes from stacking two or three low-opacity layers rather than one heavy one, which is exactly what the multi-layer editor here is for.

Presets cover the shadows people build most often: subtle card elevation, soft coloured glows, inner shadows, hard offset shadows in the brutalist style, and the light/dark paired shadows used for neumorphism. Adjust the preview background and box colour to check contrast against your real design before shipping it.