Create beautiful, smooth shadows with live preview. Copy the CSS in one click.
A box-shadow generator builds the CSS box-shadow property from four parameters — offset X, offset Y, blur, and spread — plus a color. HexColor Pro previews the shadow live, including the inset variant, and copies the finished declaration in one click.
box-shadow: offset-x offset-y blur spread color inset;
You can layer multiple shadows by comma-separating them. This creates more depth than a single shadow:
offset-x and offset-y move the shadow, blur-radius softens its edge, and spread-radius grows or shrinks the shadow before blurring. Positive spread expands it, negative spread contracts it. An optional inset keyword draws the shadow inside the element.
Usually too much opacity and too little blur. Real light produces soft, low-contrast shadows: opacity around 0.08–0.15 with a large blur and a slight vertical offset reads as natural, while pure black at 0.5 reads as a sticker.
Yes. box-shadow accepts a comma-separated list, and layering two or three shadows — a tight contact shadow plus a wide ambient one — is the usual way to get realistic elevation without filters.