Box Shadow Generator
Design CSS box shadows visually and copy the code
box-shadow: 0px 4px 12px -1px #00000026;
Box shadows that read as real
Shadows are how a flat interface gains depth: a card lifting off the page, a button pressing in on click. The CSS box-shadow property packs offset, blur, spread, color, and an optional inset into one line, which is hard to feel without seeing it, so the tool gives you a slider per value and a live preview box.
The four numbers
Horizontal offset slides the shadow left or right, vertical offset moves it up or down, and for a natural look the vertical value stays positive while the horizontal sits near zero. Blur sets edge softness, from a hard sunlit edge at zero to a diffuse haze at high values. Spread grows or shrinks the shadow before the blur runs, and most everyday shadows leave it at zero.
Inset and layered shadows
The inset keyword moves the shadow inside the box, which reads as a pressed button or a recessed well. CSS also lets you stack several shadows in one declaration, separated by commas, with the first in the list painted on top: a soft outer shadow under a sharper edge highlight. The tool designs one shadow at a time, so copy the CSS out and append the extra comma-separated shadows by hand. Layering is how depth stops looking like a single flat drop shadow.
Shadow questions
- What is a solid default for a card?
- 0 4px 6px rgba(0,0,0,0.1) is a workhorse: soft, sitting just below the card. For a hover lift, grow the vertical and blur, say 0 10px 25px rgba(0,0,0,0.15).
- Why does part of my shadow get cut off?
- Look for a parent with overflow set to hidden, auto, or scroll. A shadow draws outside the element's box without taking up layout space, so a clipping ancestor slices it off at its edge. Add padding inside the clipping container, or move the shadow onto the parent itself.